NianToB/resources/skills/local/design/SKILL.md

name: design description: Use for any design work: product design, UX flows, UI/HTML/web/mobile visual direction, PPT or slide storytelling and layout, brand art direction, design systems, redesigns, frontend polish, and design reviews. Produces design briefs, visual systems, tokens, references, critique, and handoff specs for execution skills such as html-slides, pptx, image, or frontend implementation.

design

Design director and design-system skill for product, interface, slide, brand, and visual-quality work. Use this skill whenever the user asks something to look better, feel more professional, become more usable, gain a visual direction, become a presentation, or be reviewed from a design perspective.

This skill decides what the work should become. It may support execution, but its primary output is design judgment: direction, system, structure, constraints, and acceptance criteria. Use execution skills such as html-slides, pptx, image-search, imagegen, or frontend coding tools when the user needs the final artifact built.

Core Workflow

1. Route The Design Task

Classify the request before choosing tools:

Task type	Use this skill to produce
Product design	User goals, core jobs, information architecture, flows, states, priority, tradeoffs
UI, HTML, app, web, mobile	Visual direction, layout system, components, responsive behavior, interaction rules
PPT, pitch, report, slides	Narrative spine, section rhythm, slide system, chart treatment, density rules
Brand or art direction	Mood, references, palette, typography, imagery, motion, anti-patterns
Redesign or polish	Ranked critique, fix strategy, before/after direction, implementation checklist
Design system	Tokens, component grammar, page or slide patterns, governance and override rules

If the task spans multiple surfaces, design the system first, then hand off the relevant parts to the execution skill.

2. Extract The Brief

Infer what you can from the user's request. Only ask for missing high-impact preferences that cannot be inferred.

Capture:

• Audience and occasion
• Output surface: product flow, app screen, HTML page, HTML deck, PPT deck, image, document, or review
• Content maturity: topic only, rough notes, full content, existing artifact
• Tone and taste: authoritative, warm, playful, cinematic, editorial, quiet, luxury, technical, etc.
• Constraints: brand, language, accessibility, viewport, platform, deadline, existing code/design system

3. Build Evidence Before Deciding

Use the local database when the task needs structured design-system reasoning:

python3 skills/design/scripts/search.py "<product type> <industry> <tone> <surface>" --design-system [-p "Project Name"]

Use targeted searches when useful:

python3 skills/design/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
python3 skills/design/scripts/search.py "<keyword>" --stack html-tailwind

Available domains: product, style, typography, color, landing, chart, ux, react, web, prompt.

Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose.

4. Use Brand References For Concrete Taste

When visual direction matters, read only the needed files from:

references/design-md/<slug>/DESIGN.md

Pick one primary reference and at most two secondary references. Extract practical rules for mood, palette, typography, layout, component treatment, spacing, motion, and anti-patterns. Adapt the reference to the current product; do not copy a brand literally unless the user explicitly asks for that.

Starting points:

Intent	Suggested references
Light premium product	apple, airbnb, notion, stripe
Cinematic AI/media	runwayml, apple, nike, spacex
Clean B2B SaaS	linear, airtable, intercom, mintlify, vercel
Developer/AI tools	cursor, claude, vercel, supabase, replicate
Creative tools	figma, framer, webflow, clay, miro
Enterprise dashboard	ibm, sentry, hashicorp, clickhouse, mongodb
Luxury or high-end brand	bugatti, ferrari, lamborghini, bmw, mastercard
Media/editorial	wired, theverge, pinterest, spotify

For Zhinian Assistant work, prefer apple, linear, runwayml, notion, and airbnb unless the user asks for another direction.

Output Contracts

Product Design Brief

Use for product planning, feature shaping, IA, flows, and UX:

• Product goal and audience
• Primary jobs-to-be-done
• Information architecture
• Critical flows and states
• Interaction principles
• Success metrics and design risks
• Execution handoff for UI, deck, or prototype work

Interface / HTML Design Brief

Use for websites, app screens, dashboards, HTML pages, frontend polish:

• Visual direction and reference anchors
• Layout system and responsive behavior
• Color, typography, spacing, radius, shadow, motion tokens
• Component grammar and state rules
• Accessibility and interaction requirements
• Implementation checklist for the frontend agent

Slide / PPT Design Brief

Use for PPT, HTML deck, pitch deck, report deck, training slides:

• Audience, occasion, and desired audience feeling
• Narrative spine and section rhythm
• Slide count and slide archetypes
• Typography, palette, imagery, chart treatment
• Density rules: what goes on one slide vs. split
• Handoff target: html-slides for browser decks or pptx for PowerPoint files

Brand / Art Direction Brief

Use for brand tone, visual identity, campaign look, imagery:

• Visual territories, with one recommended direction
• Palette, type, image, icon, and motion rules
• Example applications
• Do-not-use list
• Handoff needs for image or frontend generation

Design Review

Lead with findings, ordered by severity:

• What is hurting clarity, trust, polish, conversion, or usability
• Why it matters
• Specific fixes
• Design-system deltas to prevent recurrence
• Test or screenshot checks needed after changes

Handoff To Execution Skills

Use this skill before execution when the user asks for quality or taste, then pass a compact brief to the builder.

Handoff To html-slides

Provide:

• Deck title, audience, occasion, mood
• Slide count target
• Content outline and known assets
• Preferred references or template tones
• Palette/type/motion constraints
• Required output folder name
• QA requirements: 1280x720, 1440x900, mobile narrow, no slide overflow

Handoff To pptx

Provide:

• Slide count and narrative structure
• Master style: title, section, content, chart, quote, appendix
• Palette, typography, chart treatment
• Required images/icons/logos
• Export and visual QA expectations

Handoff To Frontend Implementation

Provide:

• Page or component scope
• Existing design system to reuse
• Token deltas only when necessary
• Component/state specs
• Responsive breakpoints and a11y requirements
• Screenshot viewports for QA

Search Reference

Detailed Domains

Domain	Use for	Example keywords
product	Product type recommendations	SaaS, e-commerce, portfolio, healthcare, beauty, service
style	UI styles, colors, effects	glassmorphism, minimalism, dark mode, brutalism
typography	Font pairings, Google Fonts	elegant, playful, professional, modern
color	Color palettes by product type	saas, ecommerce, healthcare, beauty, fintech, service
landing	Page structure, CTA strategy	hero, testimonial, pricing, social-proof
chart	Chart type and data display	trend, comparison, timeline, funnel, pie
ux	Best practices and anti-patterns	animation, accessibility, z-index, loading
react	React/Next.js performance	waterfall, suspense, memo, rerender, cache
web	Web interface guidelines	aria, focus, keyboard, semantic, virtualize
prompt	AI prompts and CSS keywords	style name or visual treatment

Persisting A Design System

For projects that will continue across sessions:

python3 skills/design/scripts/search.py "<query>" --design-system --persist -p "Project Name"

This creates:

• design-system/MASTER.md
• design-system/pages/

For a page-specific override:

python3 skills/design/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

When building a page, first check design-system/pages/<page-name>.md. If it exists, it overrides MASTER.md; otherwise follow MASTER.md.

Universal Design Rules

• Make the artifact specific to its audience and occasion, not generic.
• Prefer a coherent visual system over isolated beautiful elements.
• Do not mix unrelated templates, brands, or component languages.
• Keep enterprise and operational tools dense, calm, and scan-friendly.
• Keep slide decks viewport-safe: split content instead of cramming.
• Use real icons or image assets instead of emoji as UI decoration.
• Use motion for hierarchy and pacing, not for noise.
• Preserve accessibility: contrast, keyboard focus, labels, alt text, and reduced motion.
• Validate with screenshots or previews whenever a visual artifact is produced.

Pre-Delivery Checklist

• The chosen direction matches the audience and use case.
• The design has one clear primary reference and optional secondary references.
• Tokens and component rules are explicit enough for another skill to execute.
• Layout density is appropriate for the surface.
• Interaction and accessibility rules are covered.
• Anti-patterns are named.
• If handing off, the target execution skill has all inputs needed to build without guessing.