SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsdesign-style

design-style

Design & creation

View repository

Updated 10-16 08:43

About this skill

Design Style

Recommend and apply design styles from a curated library of 67 visual aesthetics — from Brutalism to Glassmorphism, Cyberpunk to Japandi.

When This Skill Activates

  • User asks "what style should I use for my project?"
  • User says "recommend a design style"
  • User mentions a specific style name ("use glassmorphism", "apply brutalist style")
  • User wants to apply colors, fonts, or CSS from a design aesthetic
  • User asks "Help me choose a design style" / "Recommend a design style" / "Pick a design style"

Core Principles

  1. Show, don't lecture — Lead with concrete CSS, colors, and prompt templates. Not theory.
  2. Context-aware — A fintech dashboard needs different styles than an indie game landing page.
  3. Opinionated — Recommend 3 styles, not 15. Explain why each fits.
  4. Immediately actionable — Every run ends with a browsable comparison HTML the user can pick from, plus paste-ready CSS variables.
  5. No middle stops — After the user provides purpose + basic info, run straight through to a generated preview. Don't stop to ask "which one do you prefer?" — let the visual do the choosing.

Phase 0: Detect Mode

  • Mode A: Recommend (default) — User wants styles picked for their project. Go to Phase 1.
  • Mode B: Lookup — User names a specific style ("tell me about glassmorphism"). Skip Phase 1/2, go straight to Phase 3 for that style.
  • Mode C: Apply — User picks a style and wants it applied to existing code ("apply cyberpunk to this file"). Skip Phase 1/2/3, go straight to Phase 4.

Phase 1: Two Questions — Purpose + Basic Info

Combine both into a single AskUserQuestion call. Do NOT ask them one at a time.

Question 1 — Purpose

Header: Purpose Question: "What are you building, and what's the goal? / What are you making? What goal do you want to achieve?" Options (with freeform allowed):

  • SaaS / tool product
  • Portfolio / personal site
  • E-commerce / brand store
  • Blog / content site
  • Landing Page / marketing landing page
  • App / mobile
  • Presentation / Slides / talk
  • Other (freeform)

Question 2 — Basic Info

Header: Basics Question: "Tell me a bit more — brand vibe, audience, must-have/avoid colors, any constraints. / Say a few words about the project basics: brand tone, target users, colors that must be kept or avoided, any constraints." No fixed options — freeform text answer.

Example acceptable answers:

  • "AI dev tool, targeting engineers, must feel technical, no baby pastels"
  • "Independent photographer portfolio, wants a dark, premium feel, leaning cool-toned"
  • "Children's education App, parents pay, needs to reassure parents while making kids find it fun"

Skip Phase 1 entirely if the user's initial message already covers both (e.g., "Help me find 3 bold but credible styles for my AI dev SaaS" — that answers Purpose + Basics inline).

Phase 2: Pick 3 Styles + Auto-Generate Preview

No middle stop. After Phase 1, immediately do all of the following in one turn:

Step 2.1 — Read the reference

Read styles-reference.md — the "Use Case Recommendations" section for the user's Purpose category, and the full detail blocks (### N. id — Name / 中文名) for candidate styles.

Step 2.2 — Infer innovation level from Basic Info

Parse the free-text answer for signals:

Signal words in Basics Innovation level
trustworthy, professional, safe, financial, enterprise, steady, credible, professional Level 1
clean, modern, standard SaaS, modern, clean Level 2
bold, distinctive, signature, memorable, bold, recognizable, memorable Level 3
experimental, rule-breaking, avant-garde, portfolio-grade, pioneering, experimental, adventurous, portfolio-grade Level 4

If ambiguous, default to Level 2–3 (the sweet spot for most projects).

Step 2.3 — Choose 3 styles with real spread

Pick 3 styles that span the axis — not 3 flavors of the same thing. Rules of thumb:

  • One "safest" pick that clearly matches the level.
  • One "signature" pick that leans one level bolder.
  • One "wildcard" from an adjacent Purpose category that could reframe the project (e.g., for a SaaS pick, throw in an Editorial or Kinetic option).

Avoid recommending 3 styles that share the same DNA quadrant (e.g., three dark-neon styles). The 3 should feel visually distinct.

Step 2.4 — Print the recommendation card (3 blocks)

## Style Recommendations

### 1. [Name] · [中文名] — [one-line reason it fits this project]
Colors: ■ #hex ■ #hex ■ #hex ■ #hex
DNA: Roundness X | Contrast X | Warmth X
Why: [2 sentences tied to the user's Purpose + Basics — not generic style copy]

### 2. [Name] · [中文名] — [one-line reason]
...

### 3. [Name] · [中文名] — [one-line reason]
...

Step 2.5 — Generate a side-by-side comparison HTML

Immediately (in the same turn — do NOT ask the user "which one do you prefer?"), create a single-file HTML that renders the same sample content in all 3 chosen styles side-by-side:

  • Save path: ~/Desktop/Claude skills/design-style-preview-<project-slug>.html
  • Sample content: a hero card the user can imagine as their landing page — brand name (from Basics if given, else "Your Project"), a tagline, a primary CTA button, 3 feature chips. Same content in each of the 3 style renders.
  • Layout: 3 columns on desktop (grid-template-columns: repeat(3, 1fr)), stacked on mobile.
  • Each column displays: style number & name at top, then the rendered card using that style's CSS from styles-reference.md.
  • Include a "Pick this one" button under each render that copies the style ID to clipboard.
  • Open the file with open <path> at the end of the turn.

Step 2.6 — Print the follow-up prompt

End the turn with:

"Preview opened. Tell me which one clicks — or say 'wildcard 3 more' and I'll pull a different trio."

Phase 3: Show Style Details (Lookup Mode)

Only used when the user names a specific style directly (Mode B) or after they pick one from the Phase 2 preview.

Read the style's full entry in styles-reference.md and present:

  1. Overview — Name, difficulty, DNA scores
  2. Color Palette — All colors with their roles, as a visual table
  3. CSS Snippet — The core CSS that defines this style
  4. Font Recommendations — Extract from the CSS/prompts what fonts work best
  5. Prompt Templates — All 3 prompt templates (Basic, Advanced, Keywords)
  6. Do's and Don'ts — Quick reference for staying on-style
  7. Related Styles — 3 similar styles for exploration

Then offer: "Want me to apply this to your project? (Phase 4)"

Phase 4: Apply to Project

Triggered when the user picks a favorite from the Phase 2 preview OR explicitly asks to apply a style.

4.1 Generate CSS Variables

:root {
  /* [Style Name] Theme */
  --color-primary: #...;
  --color-secondary: #...;
  --color-accent: #...;
  --color-background: #...;
  --color-surface: #...;
  --color-text: #...;
  --color-text-secondary: #...;

  --font-heading: '...', ...;
  --font-body: '...', ...;

  --radius-sm: ...;
  --radius-md: ...;
  --radius-lg: ...;

  --shadow: ...;
}

4.2 Scan the user's project

Read existing CSS/HTML/framework files to detect: Tailwind, vanilla CSS variables, CSS Modules, styled-components, and any existing theme tokens.

4.3 Apply in the project's own idiom

  • Tailwind → theme.extend config with the palette, fonts, shadows.
  • CSS Variables → a :root block (or update existing tokens).
  • Styled-components / CSS Modules → a theme object.
  • Raw HTML → inject a <style> block or inline styles.

Also provide:

  • Google Fonts / Fontshare <link> for recommended fonts
  • A sample component (card, button, nav) styled in the chosen aesthetic
  • The 3 prompt templates for generating more UI with AI tools

4.4 Verify

  • WCAG AA contrast on primary/text combos
  • Font links properly included
  • No overrides that break existing components

Data Source

All style data comes from styles-reference.md:

  • Quick index of all 67 styles with colors, difficulty, and tags
  • Use case recommendations by project type and innovation level
  • Full details per style: colors, CSS, prompts, do's/don'ts, DNA scores

The authoritative interactive reference: https://design-lab-yanliu.vercel.app/

Guardrails

  • Never recommend more than 3 styles at once — too many options paralyze.
  • Never stop between Phase 1 and Phase 2's HTML output — the point of this skill is to let the user see the preview before they decide, not to interview them further.
  • Always ground recommendations in the user's Purpose + Basics — no generic "these are popular styles."
  • When applying styles, preserve existing code structure — don't rewrite files.
  • If the user's project has an established design system, integrate with it rather than override.
  • Font recommendations must use Google Fonts or Fontshare (free, no licensing issues).
  • Check color contrast when applying dark or low-contrast styles.