design-knowledge-base

name

design-knowledge-base

description

Use Tina's personal UI/UX and experience-design knowledge base to choose high-quality reference websites and design resources for a project, then turn them into prompts, checklists, or implementation guidance. Trigger when the user asks for UI/UX resources, design inspiration, several reference sites for a project, a personal site, portfolio, landing page, SaaS page, dashboard, mobile app, brand website, motion reference, mockup, design system, accessibility review, UX research plan, or wants Codex to use Tina's saved references while building.

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.

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.