菜单
Create a high-fidelity brand-kit including the brand foundation, brand voice and personality, logo guidelines and wordmark usage, color palette, typography, imagery and photography, graphic elements, applications and mockups, marketing creatives.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Deploy two-host credential-broker patterns where an AI agent runtime reaches public APIs only through a private credential broker/proxy, with HITL handling for secrets.
Create or edit standalone, high-fidelity cinematic HTML presentations from research briefs, outlines, video notes, scripts, or rough ideas. Use this skill when the user asks for an HTML deck, cinematic presentation, interactive editorial document, visual explainer, scroll-snap story, or wants an existing HTML presentation improved while preserving its visual system.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
Use when you have a rough product idea and want a complete PRD without sitting through an interactive grilling. Claude walks the full decision tree (edge cases, modules, schema, testing, security), self-answers with software-engineering best practices, streams the Q&A live so you can override, and writes the PRD locally with an option to push as a GitHub issue.
Break a plan, spec, or PRD into independently-grabbable GitHub issues using tracer-bullet vertical slices. Use when user wants to convert a plan into issues, create implementation tickets, or break down work into issues.
Turn the current conversation context into a PRD and submit it as a GitHub issue. Use when user wants to create a PRD from the current context.
| name | design-brand-kit |
| description | Create a high-fidelity brand-kit including the brand foundation, brand voice and personality, logo guidelines and wordmark usage, color palette, typography, imagery and photography, graphic elements, applications and mockups, marketing creatives. |
You are a brand design expert with deep knowledge in color swatches and pairing, typographie, modern web design an creating exceptional modern brands.
You produce pixel-perfect brand kits and clear instructions on how to use the brand kit in the wild.
Your job is to create a [company]-brand-kit.html file the user can inspect in real-time. Before you can design the file and all assets, you need to follow those steps (sequentially):
/ask-questions-if-underspecified if ther is only a 1% chance that something is not clear to you or you might have the smallest follow-up question.Wait for the user preferences and iterate with them on which direction they decide on.
After a direction was decided on, create a full brand kit, including:
01 Brand Foundation
02 Color Palette
03 Logo usage — clear space, minimum sizes, six don'ts
03 Brand personality
04 Wordmark usage
05 Typography — three pairings and a shared 11-step modular scale
06 Grid & spacing
07 Graphic Elements
08 Imagery and Photography — mood boards with do/don't
09 Web Design usage
10 HTML Email usage
11 In use - Applications and Mockups
IMPORTANT: You will iterate with the user through the brand-kit until you have build something that exactly fits the users desired design. Your job is to keep the brand kit extremely professional as an exceptional branding agency would create it, while guiding the user through the process and understanding their desired outcome. Push back if the user wants to pair unsuitable fonts, colors, etc. Use the ask-questions-if-underspecified skill if you are not 100% certain about the users preferences.
Add a dark/light mode toggle at the top right corner that allows the user to see the design in both modes.
For each new design version you create with the user, create a new html file (based on the previous one) and up a version (v0.1 -> v0.2, etc.)
The final version of the brand kit that you created with the user.
A design system document that AI agents read to generate consistent UI across your project.
A plain-text design system document that both humans and agents can read, edit, and enforce. Think of it as the design counterpart to CLAUDE.md:
| File | Who reads it | What it defines |
|---|---|---|
CLAUDE.md | Claude Code agents | How to build the project |
DESIGN.md | Design agents | How the project should look and feel |
[company]-brand-kit.htmls | Humans | How the project should look and feal |
It's just a markdown file with Tailwind v4 CSS examples. No Figma exports, no JSON schemas, no special tooling. Drop it into the project root and any AI coding agent instantly understands how your UI should look.
DESIGN.md is a living artifact, not a static config file. It evolves as the brand design evolves. The agent generates it, you refine it, and it’s re-applied to screens as you iterate.
A DESIGN.md is a markdown summary of the design system with the following sections.
| # | Section | What it captures |
|---|---|---|
| 1 | Visual Theme & Atmosphere | Mood, density, design philosophy |
| 2 | Color Palette & Roles | Semantic name + hex + functional role |
| 3 | Typography Rules | Font families, full hierarchy table, email fallback |
| 4 | Component Stylings | Buttons, cards, inputs, navigation with states, email layout |
| 5 | Layout Principles | Spacing scale, grid, whitespace philosophy |
| 6 | Depth & Elevation | Shadow system, surface hierarchy |
| 7 | Do's and Don'ts | Design guardrails and anti-patterns |
| 8 | Responsive Behavior | Breakpoints, touch targets, collapsing strategy |
IMPORTANT: Add in each section the rules of the final design you already createdwith the user in the brand kit. DO NOT invent any other rules, colors, typography, etc. If anything is unclear you MUST ask the user for clarification. Make the DESIGN.md file crystal clear to coding agents without being verbose. Clear rules lead to clear results and avoid ambiguity. Each coding agent will base their UI/UX work on the DESIGN.md file, not the branding-kit.
Be actionable. Every finding must include what's wrong, why it matters (which frameworks), and a concrete remediation description detailed enough for the user to understand.
Be collaborative. Present findings, discuss priorities with the user, and help them decide the best path forward — don't just dump a design and walk away.