From ai-everything
Orchestrate ui-ux-pro-max + frontend-design for distinctive UI. Writes SSOT brief to designs/specs, generates preview mockups in designs/previews with prompt docs in designs/images, then implements with a11y guardrails. Use when user asks to design, redesign, build UI, landing page, dashboard, component, design system, visual direction, typography, mockup, or prototype. Actions: design, redesign, build UI, create landing page, style guide, design preview, UI prototype. Triggers: 'designer', 'frontend design', 'UI design', '设计页面', '做落地页', '设计系统', '视觉方向', '去模板化', 'design brief', 'UI prototype', '设计图'. Requires installed ui-ux-pro-max and frontend-design skills.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ai-everything:designerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
IRON LAW: After Step 0 confirms both dependency skills are **installed**, run Steps 1 → 2 → 3a → 3b automatically — no user confirmation to **start** the pipeline. Never substitute repo paths, cached markdown, or a freestyle design pass. If any prerequisite is missing, stop and output only the missing-skill message with install instructions. After Step 3b, **`designs/specs/{slug}.md` is SSOT**;...
IRON LAW: After Step 0 confirms both dependency skills are installed, run Steps 1 → 2 → 3a → 3b automatically — no user confirmation to start the pipeline. Never substitute repo paths, cached markdown, or a freestyle design pass. If any prerequisite is missing, stop and output only the missing-skill message with install instructions. After Step 3b, designs/specs/{slug}.md is SSOT; previews and code must follow it.
Red flags (stop — fix before continuing):
ui-ux-pro-max and frontend-designskills/ui-ux-pro-max/ or skills/frontend-design/ instead of invoking installed skills{{input}})designs/specs/{slug}.md and paired preview/image docsCopy this checklist and check off items as you complete them:
Designer Progress:
- [ ] Step 0: Prerequisite check ⛔ BLOCKING
- [ ] Confirm ui-ux-pro-max and frontend-design are installed
- [ ] Step 1: Base design system (ui-ux-pro-max) ⚠️ REQUIRED
- [ ] Step 2: De-templating critique (frontend-design) ⚠️ REQUIRED
- [ ] Step 3: Spec, previews & user gate ⚠️ REQUIRED
- [ ] Step 4: Implement UI prototype (conditional — Option 1 only)
- [ ] Step 5: Delivery pass (conditional — Option 1 only)
Control flow
{{input}} already contains explicit build intent (see Step 3c).Confirm these skills are installed and callable in the current session (available skills list / Skill tool — not repo directories):
| Required skill | Role |
|---|---|
ui-ux-pro-max | Step 1 / 5: design system and engineering guardrails |
frontend-design | Step 2 / 5: de-templating critique and visual direction |
Detection: verify each name in the session skill list — do not infer from skills/ paths in the repo.
If any are missing → stop immediately and output only:
缺少已安装技能:<missing names>
请先安装后再运行本技能:
- frontend-design、ui-ux-pro-max:在 ai-everything 仓库根目录执行 `npm run upgrade:design`,再 `npm run deploy:cursor`(或部署到当前 harness)
- 亦可单独安装:
- frontend-design(Anthropic skills)
- ui-ux-pro-max(nextlevelbuilder/ui-ux-pro-max-skill)
Do not start design, write specs/previews, or implement UI without both dependency skills.
When both are present → treat {{input}} as the design brief and immediately begin Step 1 (no confirmation prompt).
Input: Treat the user's entire message as the design brief ({{input}}). Do not invent a different product unless the brief is empty — then ask one clarifying question (subject, audience, single page job).
ui-ux-pro-max. Follow its workflow for design-system generation (requirements analysis → --design-system or equivalent skill steps → supplemental domain searches as needed).references/design-brief-output.md § Base System.⚠️ Do not write spec files, previews, or implementation code in this step.
frontend-design. Apply its planning and self-critique lens to the Step 1 base system — not a second unrelated design.references/detemplating-critique.md and answer every question against the Step 1 output.references/design-brief-output.md § Revised Direction).⚠️ If the plan still matches a generic AI default cluster (see reference), revise again before Step 3.
Complete 3a → 3b automatically (no start confirmation), then 3c — stop and wait for user choice unless build intent is already explicit in {{input}}.
Load references/spec-artifacts.md and references/design-brief-output.md.
{slug} (kebab-case from project/page name).designs/specs/ if missing.designs/specs/{slug}.md — merged Step 1 + Step 2 content per reference format (tokens, layout, signature, detemplating Q&A).designs/specs/{slug}-implementation.md when needed.All later design work prioritizes this spec.
Load references/design-preview.md.
designs/images/{slug}-{view}.md (layout, modules, visual details, image prompt).designs/previews/{slug}-{view}.png:
Image Gen capabilityimage-gen MCP; if unavailable → GenerateImage or model multimodal generationdesigns/specs/{slug}.md.Present spec path, preview paths, and summary. Ask user to pick one:
| Option | User intent | Next action |
|---|---|---|
| 1 | 按这个方向实现 UI 原型 | → Step 4 (read spec + previews as reference) |
| 2 | 重新调整样式 | Delete this round's designs/specs/{slug}* and paired designs/previews/{slug}-*, designs/images/{slug}-*.md → Step 1 |
| 3 | 调整设计图细节 | Apply user feedback; sync-update matching files in designs/images/ & designs/previews/ per design-preview.md → return to 3c |
⚠️ Do not start Step 4 until user selects Option 1, unless {{input}} already contains explicit build intent (e.g. 「直接实现」「build UI」「搭建 UI」「按这个方向实现」) and did not ask to pause at brief-only — then treat as Option 1 and proceed to Step 4 after presenting spec and previews.
Run only after Step 3c Option 1 or explicit build intent in {{input}} (see Step 3c).
Read first: designs/specs/{slug}.md, designs/specs/{slug}-implementation.md (if any), and paired designs/images/*.md / designs/previews/*.png.
Authority split (non-negotiable):
| Layer | Owner | Apply |
|---|---|---|
| Visual direction | frontend-design | Palette, typography personality, layout concept, signature element, motion intent, copy voice — from spec |
| Engineering guardrails | ui-ux-pro-max | Spacing scale, touch targets, responsive/mobile-first, contrast, keyboard focus, reduced motion, semantic tokens |
Load references/implementation-guardrails.md during coding.
Rules:
designs/specs/{slug}.md — not ad-hoc defaults..section vs element selectors fighting on spacing).Run only after Step 4.
ui-ux-pro-max for pre-delivery checklist. Load references/delivery-checklist.md and mark pass/fail.frontend-design restraint pass ("remove one accessory") — must not contradict spec signature unless user approved in chat.designer as a standalone design encyclopedia — it orchestrates dependency skillsdesigns/images/{same-name}.md{{input}} had explicit build intent)designs/specs/{slug}.md written at Step 3a; SSOT honored in Step 4–5designs/images/*.md; index table in spec{{input}}npx claudepluginhub j-show/ai-everything --plugin ai-everythingGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.