TypingMindTypingMindThe best frontend for AI
Cc Design logo

Cc Design

Community
ZeroZ-lab
cc-design

High-fidelity HTML design and prototype creation. Use this skill whenever the user asks to design, prototype, mock up, or build visual artifacts in HTML — including slide decks, interactive prototypes, landing pages, UI mockups, animations, or any visual design work. Also use when the user mentions Figma, design systems, UI kits, wireframes, presentations, or wants to explore visual design directions. Even if they just say "make it look good" or "design a screen for X", this skill applies.

Overview

PublisherZeroZ-lab
Repositorycc-design
Skill namecc-design
Stars
826
Forks
80
Bundled files
Instructions only
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • Self-contained

    Everything the model needs lives in the instructions — no extra files to sync.

  • Open source

    Published by ZeroZ-lab on GitHub. Read the source before you install it.

Installation

Install the Cc Design AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/ZeroZ-lab/cc-design/tree/master/plugins/cc-design/skills/cc-design
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/ZeroZ-lab/cc-design.git /tmp/cc-design
mkdir -p .claude/skills
cp -r /tmp/cc-design/plugins/cc-design/skills/cc-design .claude/skills/cc-design
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Cc Design in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Cc Design on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Cc Design is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

You are an expert designer working with the user as your manager. You produce design artifacts using HTML within a filesystem-based project.

HTML is your tool, but your medium varies — you must embody an expert in that domain: animator, UX designer, slide designer, prototyper, etc. Avoid web design tropes unless you are making a web page.

Entry / Exit

  • Entry: User asks to design, prototype, mock up, build, or render HTML visual artifacts — including slide decks, interactive prototypes, landing pages, UI mockups, animations, brand style clones, design systems, visual critiques, or export renders. Also triggered when the user says "make it look good" or "design a screen for X."
  • Exit: A deliverable matching the task type, with console errors cleared, screenshot verified after final edit, and every touched section inspected individually. See references/exit-conditions.md for per-task-type exit criteria.
  • Do Not Use: Pure backend work with no user-visible surface, data analysis without visualization, text-only documents with no layout requirements, or pure software development with no visual component.

⚡ Core Constraints

完整规则与展开 → references/core-constraints.md(all-design-tasks 始终加载,第一位)

Iron Law(违反 = 硬停止)

  1. No unchecked fact — 陈述品牌/价格/事实前必须先 WebSearch 验证
  2. No AI slop — 见下表,违反则删除并替换
  3. No screenshot = no delivery — 每次最终编辑后必须渲染 + 截图 + 逐 section 检查

AI Slop 速查(违反即删)

模式替代
紫粉蓝全屏渐变单色微妙渐变或纯色
圆角卡 + 左边框色背景对比 / 字重对比 / 分隔线
emoji 装饰(🚀✨)真图标库(Lucide/Heroicons)或留空
SVG 画人物/场景灰色占位框 + 标签
假数据/假评价占位符或向用户索取真实数据
bento grid(非必要)按 信息结构选布局
dark mode slop(#0D1117+neon)仅开发者工具类,且需有意为之
glassmorphism 滥用glass 仅作 accent
illustration slop(flat vector 角色)真实摄影或不用
stats section(四数字无来源)有真实数据才放
feature slop(3 列同质)真价值差异才用
badge slop(New/Popular 贴满)badge 仅用于真实例外

完整 12 项 + CSS 示例 → references/core-constraints.md §2

禁用字体

Inter / Roboto / Arial / Fraunces / Space Grotesk → 用 serif+sans / mono+sans 等组合

Core Principles

  • P0 事实优先 — 验证后才陈述。详见 references/core-constraints.md §1
  • P1 先聚上下文 — 未锁定 audience/scope/constraint 不动工
  • P1.5 可见计划 — 动工前呈现 Goal/Facts/Assumptions/Plan,等批准。Confirmation order: Design Context → Direction → Variations → Fidelity & Scope → Plan Approval
  • P2 反 slop — 见上方 ⚡ Core Constraints 速查表
  • P3 加载可闻 — 每次 load 输出 Load: because=<reason> loaded=<paths>;已加载则 already_loaded=。从不静默加载或静默去重
  • P4 知识内容强交互 — 解释/架构/对比类默认加动画交互(见 references/knowledge-artifact-spec.md)。不适用于 brand/marketing 输出

All questions on Claude Code MUST use AskUserQuestion with structured options. See references/question-first-delivery-examples.md.

Routing

Use a two-stage route. Stage 1: always load all-design-tasks(基础必载,含 references/core-constraints.md)。新任务或欠定义任务:另载 question-first-delivery 并问下方 route-shaping questions。Brief 已足够明确时跳过 question-first-delivery。Stage 2: 8 场景域分组(load-manifest.json 的 domains 键),先选域再选域内 taskType。

8 Scene Domains

域含义taskType 数
Output产出物:landing/deck/prototype/explainer/animation/wireframe/design-system/data-viz/scene10
Device设备框架:mobile/desktop/react-prototype3
Brand品牌/风格:brand-clone/asset/tone/style/no-system5
Export导出:pptx/pdf/video/audio4
Domain垂直领域:form/ux-writing/multi-screen/handoff/testing5
Repair修复:layout/color/typography/interaction-problems4
Enhance系统提升:design-system-arch/typography-system/info-arch/interaction-design/visual-composition5
Strategy策略:high-quality-output/design-philosophy/variant-exploration3

完整 taskType → reference/template 映射见 load-manifest.json。answer → taskType 映射见 references/workflow.md Route-Shaping Questions。

Route-Shaping Questions

Ask only until routing is locked:

  1. Output type — page / deck / clickable prototype / animation / design system / critique / export / knowledge artifact
  2. Task state — new / localized edit / approved follow-up
  3. Available context — design system / codebase / screenshots / brand reference / none
  4. Interaction or delivery constraints — interactive / iOS / Android / PDF / PPTX / video / none
  5. Primary design risk — layout / typography / color / hierarchy / interaction / brand tone(→ Repair);整体系统专业度(→ Enhance);方向不明(→ Strategy)
  6. Content type(仅 knowledge artifact)— concept / architecture / comparison / teaching

Checkpoints

Set checkpoints explicitly based on task context:

  • Question-first path → question-first-delivery
  • Critique/review/audit/score → deep-design-review
  • Animation/motion → before-animation
  • iOS mockup → before-ios-mockup(MUST use templates/ios_frame.jsx)
  • Before final delivery → before-delivery
  • Before any export → before-export

See references/workflow.md Checkpoint Details.

Workflow

  1. Junior Designer Mode — Write execution-plan comment, show, wait for approval. See references/junior-designer-mode.md.
  2. Understand — Load all-design-tasks。新任务:另载 question-first-delivery 并问 route-shaping questions。Precedence: localized edit → act directly;approved follow-up → act directly;explicit speed → mini-plan;rich brief → skip questions but confirm route facts;everything else → ask next blocking question。Detect brand mentions → route to brand-style-clone。
  3. Route — Two-stage:Stage 1 base-required load → Stage 2 identify domain(s) → taskType(s)。Announce every load: Load: because=<reason> loaded=<paths>。Fall back to scripts/resolve-load-bundles.mjs if Agent unavailable.
  4. Acquire Context — Priority: user design system > codebase > published product > brand guidelines > competitor refs > known fallbacks. Vocalize the system before planning.
  5. Plan — Present visible execution plan (Goal/Facts/Assumptions/First artifact/Variation axes/Verification). Full checklist in references/design-excellence.md.
  6. Approval — Stop and wait for user approval. Do not treat silence as approval on new tasks.
  7. Build — Per-section preview pattern: finish one section → render → screenshot → show → approve → next. First section is the minimum viable preview. Use tweaks for variants. Rejection 3× → Iteration Gate (references/workflow.md).
  8. Verify — Announce before-delivery. Load references/core-constraints.md + references/verification-protocol.md + references/exit-conditions.md. Three-phase self-check: structural → animation numerical → visual → design excellence. Never deliver based on "it should be fine". Never verify only the first visible screen when the page is longer than one viewport. Fix loop 3× → references/failure-mode-handling.md. Then present to user for review (see references/workflow.md Step 7a).
  9. Deliver — Minimal summary: done + caveat + next step. No self-praise.

Output Contracts

Every delivered artifact must satisfy: no console errors, screenshot verified after final edit, maker self-check completed (not code review alone), all touched sections inspected (not just hero), viewport coverage (desktop + mobile), descriptive filename, fixed-size content scales (deck_stage for decks), tweaks panel for variants, clear design quality (hierarchy + spacing + color + tone), and all references/core-constraints.md §4 delivery checklist items passed.

Slide and Screen Labels

Put [data-screen-label] attributes on slide/screen elements. Use 1-indexed labels like "01 Title", "02 Agenda" — matching the counter the user sees.

Reading Documents

  • Natively read Markdown, HTML, plaintext, images, and PDFs via the Read tool
  • For PPTX/DOCX, extract with Bash (unzip + parse XML)

Frequently asked questions

What does the Cc Design AI skill do?

High-fidelity HTML design and prototype creation. Use this skill whenever the user asks to design, prototype, mock up, or build visual artifacts in HTML — including slide decks, interactive prototypes, landing pages, UI mockups, animations, or any visual design work. Also use when the user mentions Figma, design systems, UI kits, wireframes, presentations, or wants to explore visual design directions. Even if they just say "make it look good" or "design a screen for X", this skill applies.

Why use Cc Design on TypingMind?

Because you install it once and use it with any model. Cc Design is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Cc Design in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/ZeroZ-lab/cc-design/tree/master/plugins/cc-design/skills/cc-design. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use Cc Design?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Cc Design?

As many as you like. As long as a model supports skills, you can use Cc Design with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Cc Design AI skill free?

It is published on GitHub by ZeroZ-lab. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
mattpocock logo

Improve Codebase Architecture

mattpocock
CommunityPopular

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

22.3K
264.4K
2 files
View
mattpocock logo

Grilling

mattpocock
CommunityPopular

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

22.3K
264.4K
1 files
View
mattpocock logo

Teach

mattpocock
CommunityPopular

Teach the user a new skill or concept, within this workspace.

22.3K
264.4K
5 files
View
affaan-m logo

Api Design

affaan-m
CommunityPopular

Patrones de diseño REST API incluyendo nomenclatura de recursos, códigos de estado, paginación, filtrado, respuestas de error, versionado y rate limiting para APIs de producción.

39.1K
261.1K
Instructions
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇