TinaCEN/TinaCEN-design-knowledge-base-skill

Design Knowledge Base

Workflow

1. Identify the user's design intent in plain language.

2. For quick project reference selection, run the bundled picker from the skill folder:

   python3 scripts/suggest_references.py "<user goal>" --limit 5
   

   Use the picker first when the user asks for several reference sites, inspiration for a project, or "one-click" high-quality references.

3. Select the smallest relevant reference files when deeper context is needed:

   • Machine-readable catalog used by the picker: references/resources/reference-catalog.json
   • Broad navigation: references/resources/design-resource-map.md
   • UI/UX inspiration and tools: references/resources/uiux-designer-resources.md
   • UX research, usability, accessibility, service design, and metrics: references/resources/experience-design-resources.md
   • Shadcn/UI implementation blocks: references/resources/shadcn-ui-blocks.md
   • Coder and design-engineer tools: references/resources/coder-tools.md
   • AI design judgment process: references/playbooks/ai-design-judgment.md
   • DESIGN.md style migration: references/workflows/design-md-reference-workflow.md
   • New resource intake: references/workflows/intake-workflow.md

4. Search the selected references with rg before reading large sections.

5. Recommend 3 to 7 resources, grouped by the user's task.

6. Convert the recommendation into an actionable output: prompt, checklist, resource card, workflow, or implementation plan.

Intent Map

• Portfolio or personal site: look for portfolio, personal-site, website-showcase, personality-site, landing-page, typography, minimal, design-md, and motion.
• Personality site or personal brand: look for personality-site, personal-internet, personal-brand, playful-web, experimental-web, design-engineering, and typography.
• Brand website or brand storytelling: look for brand-identity, brand-storytelling, memorable-brand, emotional-brand, brand-voice, art-direction, visual-identity, and rebrand.
• Landing page or SaaS site: look for landing-page, saas, pricing, dashboard, animated-landing, website-showcase, and conversion.
• UX research: look for ux-research, research-methods, interviews, surveys, usability-testing, prototype-testing, and research-repository.
• Usability review: look for ux-knowledge, usability, heuristic-evaluation, ux-checklist, ux-evidence, and design-principles.
• Accessibility: look for accessibility, a11y-checklist, wcag, keyboard, focus-state, semantic-html, and inclusive-design.
• Service design: look for service-design, journey-mapping, blueprint, stakeholder-map, workshop, and public-service.
• Motion and interaction: look for motion, animated-components, transitions, microinteractions, animation-inspiration, and gsap.
• Mockups and visual production: look for mockup, social-post, cover, infographic, gradient-generator, mesh-gradient, and background-generator.
• AI coding and design-engineering tools: look for ui-skills, agent-skill, developer-tool, ai-agent-framework, mcp, and react-components.

Output Rules

• Do not simply dump links. Explain why each resource fits the user's current task.
• Do not copy another site's brand, wording, images, or proprietary assets. Borrow only style direction, structure, interaction patterns, methods, or checklists.
• Prefer task-oriented groupings over category dumps.
• For project reference requests, provide a compact shortlist first, then a "how to borrow" note for each site.
• When the user is preparing to build UI, produce a concise prompt that Codex can execute.
• When the user is doing research or review, produce a checklist or study plan with clear next actions.
• When adding a new resource to the knowledge base, use the templates under references/templates/, then update references/resources/reference-catalog.json and the relevant Markdown resource map.