Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

StyleSeed UI Engine

A single-entry design skill that routes UI work to 22 focused workflows for building, tokenizing, reviewing, and pixel-verifying interfaces.

Design & UIIntermediate★ 967⑂ 89AI score 9/10Last updated: Oct 1, 2026

What it does

  • Reads your goal and selects exactly one of 22 workflows (build, setup, studio, reference, audit, review, score, verify, dial, restyle, tokens, motion, page, component, pattern, a11y, lint, flow, copy, feedback, update, resolve).
  • Resolves the .styleseed registry and artifact bundle first so already-approved project design choices are preserved rather than overwritten.
  • Treats audit, score, verify, and status requests as read-only — no silent edits to your code.
  • Covers the full UI surface: design tokens, spacing/density axes, motion, microcopy, loading/empty/error states, and accessibility fixes.

Who it's for

  • Frontend developers and design-system owners who need consistent UI output from an AI agent
  • Solo builders whose screens drift in spacing, color, and typography
  • Teams reproducing a look from a screenshot, URL, or Figma export

Examples

  1. "Redesign the settings page" → build workflow generates it against locked project rules
  2. "What's wrong with this screen?" → audit workflow critiques UX without touching files
  3. "New brand color — regenerate tokens" → tokens workflow rebuilds the semantic palette
  4. "Check the rendered spacing in pixels" → verify workflow inspects actual output

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/bitjaru/styleseed/HEAD/engine/.claude/skills/styleseed/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the engine/.claude/skills/styleseed folder from the GitHub repo bitjaru/styleseed into my ~/.claude/skills/styleseed/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed && cp -r /tmp/styleseed/engine/.claude/skills/styleseed ~/.claude/skills/styleseed

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the whole skill directory (workflows and scripts included): cp -r /tmp/styleseed/engine/.claude/skills/styleseed ~/.claude/skills/styleseed
  5. Verify with ls ~/.claude/skills/styleseed/workflows — you should see the ss-* workflow folders; without them the skill cannot run.
  6. Restart Claude Code and ask something like "StyleSeed build a pricing page".
  7. For a brand-new project, run "StyleSeed setup" first to lock in the design baseline.
View source on GitHub ↗License: MIT