← Back to Skills Marketplace
cellinlab

CC Design

by cellinlab · GitHub ↗ · v0.1.0 · MIT-0
cross-platform ⚠ suspicious
90
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install cell-cc-design
Description
High-fidelity HTML design and prototype skill for landing pages, slide decks, mobile mockups, interactive prototypes, dashboard explorations, design-directio...
README (SKILL.md)

CC Design

Overview

这个 Skill 只处理一类任务：

  • 把视觉需求做成可预览、可截图、可迭代的 HTML 设计产物

它覆盖的是：

  • 落地页
  • 演示稿 / slide deck
  • dashboard / UI mockup
  • 移动端 screen / onboarding
  • 可点击交互原型
  • 视觉方向探索与对比

它不处理：

  • 纯文案策划
  • 纯内容写作
  • 纯图片生成
  • Figma 文件生产

如果用户真正缺的是内容策略、文章、脚本或图片素材，不要在这里偷偷扩 scope。

Quick Start

  1. 先判断输出类型：landing page、deck、mobile mockup、prototype，还是视觉探索。
  2. 先看项目里有没有现成设计系统、token、组件、品牌文档或现有页面。
  3. 再决定加载哪些 references，必要时复制 assets/templates/ 下的模板。
  4. 写 HTML 之前，先明确视觉焦点、情绪基调、层级和留白策略。
  5. 完成后默认做结构检查和截图检查；需要导出时再调用脚本。

Routing Guide

任务类型 先读什么 可复用模板 重点检查
任意设计任务 references/design-excellence.md - 视觉层级是否成立
任务模糊 / 需要先选风格 references/design-direction-advisor.md assets/templates/design_canvas.jsx 可选 3 个方向是否真的不同
需要设计评审 references/design-review-guide.md - 反馈是否可执行
没有现成设计系统 references/frontend-design.md 按场景选择 是否落入通用 AI 风
有现成设计系统 / 代码 / 品牌资产 references/design-context.md 按场景选择 是否真的复用了上下文
具体品牌 / 产品任务 references/brand-asset-protocol.md + references/brand-style-loader.md 按场景选择 事实和资产是否核实
品牌风格克隆 references/brand-style-loader.md 按场景选择 品牌气质是否对味
Landing page / 产品页 references/design-patterns.md assets/templates/browser_window.jsx 可选 响应式与首屏层级
Slide deck references/starter-components.md assets/templates/deck_stage.js 固定画布缩放与翻页
多方案探索 references/tweaks-system.md assets/templates/design_canvas.jsx 方案切换是否清晰
Mobile mockup references/starter-components.md + references/interactive-prototype.md assets/templates/ios_frame.jsx / android_frame.jsx 安全区、触达区、设备框
Interactive prototype references/interactive-prototype.md + references/react-babel-setup.md 按场景选择 导航、状态、交互是否成立
动画 / motion study references/starter-components.md + references/react-babel-setup.md assets/templates/animations.jsx 时间轴和播放状态
设计系统 / token 体系 references/design-system-creation.md - token 是否完整且被真正使用
需要导出 references/platform-tools.md - 文件是否实际生成

Default Contract

默认采用以下约定，除非用户另有说明：

  • 输出语言：中文说明
  • 核心交付：HTML 文件
  • 默认优先复用现有设计上下文，而不是凭空发明新风格
  • 如果任务提到真实品牌或产品，默认先核实事实与资产，再设计
  • 如果没有设计系统，先用可控 token 和字体组合建立视觉基线
  • 如果需求模糊，默认先提 3 个方向而不是直接拍板
  • 默认至少提供 2-3 个方向中的一个可比较入口，或通过 tweaks 暴露变化
  • 交付前默认检查 console、结构和截图
  • 需要导出时，优先导出 PDF / PPTX / 单文件 HTML，而不是口头说“可以导出”

Workflow

Step 0: Verify Facts for Real-World Entities

如果任务里出现了具体品牌、产品、公司或已命名服务：

  • 先核实它是否存在、是否已发布、当前形态是什么
  • 先找 logo、产品图、UI 截图或官方资产
  • 不要直接凭印象写“像某某品牌”

需要时读 references/brand-asset-protocol.md。

Step 1: Scope the Request

至少先弄清：

  • 最终产物是什么
  • 几屏 / 几页 / 几个方向
  • 保真度要到什么程度
  • 有没有现成品牌或参考对象
  • 是否需要导出
  • 是先做方向建议，还是直接做成品

如果信息不够，读 references/question-protocol.md。

Step 2: Acquire Design Context

开始做之前，先主动搜：

  • 现有 HTML / CSS / 组件
  • token 文件 / 设计系统说明
  • 已上线页面
  • 品牌文案或视觉参考

已有系统时，优先复用它的颜色、字体、间距、圆角、阴影和组件语言。

如果上下文很少，先读 references/design-context.md。

Step 3: Lock the Visual Intent

写代码之前，先用 references/design-excellence.md 的思路回答这些问题：

  • 这一屏最重要的视觉焦点是什么
  • 目标情绪更偏信任、兴奋、专业还是创意
  • 层级如何建立
  • 留白和节奏如何组织
  • 颜色和字体如何配合
  • 是否需要多个方向并列比较

如果没有设计系统，再读 references/frontend-design.md。

如果用户还没能决定方向，不要硬做，先读 references/design-direction-advisor.md。

Step 4: Work Like a Junior Designer, Not a Black Box

开始实现时，不要直接闷头做完整稿。

优先做：

  • 一版 assumptions + placeholder
  • 一次早期展示
  • 用户确认后的主版本推进
  • 中途再展示一次
  • 最后才做 polish

需要更细流程时，读 references/junior-designer-workflow.md。

Step 5: Build with the Right Level of Structure

按场景选择最省力的方式：

  • deck 用 assets/templates/deck_stage.js
  • 多方案对比用 assets/templates/design_canvas.jsx
  • 手机稿用 assets/templates/ios_frame.jsx 或 android_frame.jsx
  • 浏览器场景用 assets/templates/browser_window.jsx
  • 桌面工具窗口用 assets/templates/macos_window.jsx
  • 动画场景用 assets/templates/animations.jsx

如果要写 React 内联原型，读 references/react-babel-setup.md。

Step 6: Add Variation without File Explosion

如果用户要多个方向，不要默认拆成一堆 HTML。

优先：

  • 用 design_canvas 并列展示
  • 用 tweaks 面板切换颜色、排版、布局、文案层级

需要时读 references/tweaks-system.md。

Step 7: Verify Before Delivery

完成后必须做验证，不要“写完即交”。

默认检查：

  • 有没有 console error / 关键 warning
  • 主要结构有没有渲染出来
  • 截图里层级、留白、对比和对齐是否成立
  • slide / prototype 的导航和缩放有没有坏掉

详细流程见 references/verification-protocol.md。

Step 8: Review When Asked, Export When Needed

如果用户要求 review、比较多个方向、或交付前做专家审查：

  • 从方向匹配、层级、做工、功能性、辨识度 5 个维度看
  • 给出可执行问题，不要只说“还差点意思”
  • 最后附 Quick Wins

需要时读 references/design-review-guide.md。

如果用户需要导出，再读 references/platform-tools.md 并调用脚本：

  • node skills/cc-design/scripts/gen_pptx.js
  • node skills/cc-design/scripts/open_for_print.js
  • node skills/cc-design/scripts/super_inline_html.js

Hard Rules

Do not:

  • 在已有设计系统时无视上下文另起炉灶
  • 在真实品牌 / 产品任务里跳过事实核验和资产采集
  • 把视觉任务做成普通模板页
  • 在需求模糊时直接默认一个 generic 方向
  • 用一堆花哨效果掩盖信息层级问题
  • 明明需要多方向，却只给一个含糊方案
  • 没截图、没检查就直接交付
  • 把图片生成需求硬塞进 HTML 设计流程

Always:

  • 先明确输出类型和约束
  • 先搜上下文，再设计
  • 具体品牌任务先核实事实与资产
  • 先做视觉判断，再写代码
  • 在大任务里先给 assumptions / placeholder，再继续
  • 需要模板时优先复用模板
  • 交付前至少做一轮结构检查和截图检查
  • 诚实说明哪些导出 / 预览环节已验证，哪些还没验证

Resource Map

Usage Guidance
This skill appears to be what it says (HTML design + templates) but it has executable Node scripts and instructs the agent to fetch external DESIGN.md files. Before installing or running: 1) Ensure you or your agent environment allow/expect running Node scripts — the manifest does not declare Node as a required binary. 2) Inspect the included scripts (scripts/gen_pptx.js, open_for_print.js, super_inline_html.js) to confirm they don't do unexpected filesystem/network operations. 3) Be aware the brand-style-loader fetches files from raw.githubusercontent.com/getdesign.md; this will cause outbound network requests and may pull third-party content into outputs (check licensing/attribution). 4) When serving or previewing generated HTML, note deck-stage posts messages to window '*' and uses localStorage—avoid opening artifacts in untrusted contexts. If you lack the ability to manually review the scripts, run this skill in a restricted/sandboxed environment or ask the publisher to document required runtimes and a security checklist.
Capability Analysis
Type: OpenClaw Skill Name: cell-cc-design Version: 0.1.0 The cell-cc-design skill bundle is a comprehensive toolset for generating high-fidelity HTML designs, slide decks, and interactive prototypes. It includes several utility scripts (gen_pptx.js, open_for_print.js, super_inline_html.js) that leverage Playwright for browser automation to render and export designs to PPTX and PDF formats. While the skill includes instructions to fetch remote design tokens from a specific GitHub repository (getdesign.md) and uses powerful browser automation tools, these capabilities are directly aligned with its stated purpose of professional design work and lack any indicators of malicious intent, data exfiltration, or unauthorized persistence.
Capability Tags
cryptocan-make-purchases
Capability Assessment
ℹ Purpose & Capability
The name/description (HTML design & prototyping) aligns with included templates, references, and scripts which produce HTML/PPTX/printable output. The presence of many design references and UI templates is coherent with the stated goal.
⚠ Instruction Scope
SKILL.md instructs the agent to: search web sources for brand DESIGN.md files (raw.githubusercontent.com / getdesign.md), look through project HTML/CSS/components, and run local Node scripts (gen_pptx.js, open_for_print.js, super_inline_html.js). These are reasonable for a design skill but go beyond a passive guidance doc — they require filesystem access, a Node runtime, and outbound web access. The manifest did not declare those runtime needs; instructions also post messages (window.postMessage('*')) and use localStorage in templates, which can have privacy/communication implications when generated pages are opened in a browser.
ℹ Install Mechanism
There is no install spec (instruction-only), so nothing external is pulled during installation. However, the skill includes multiple executable script files (Node/JSX). Running them will execute code from the package on-host; the absence of an install step reduces installation risk but does not eliminate execution risk when scripts are invoked at runtime.
✓ Credentials
The skill declares no required environment variables or credentials, which is proportional to a design/template skill. That said, its runtime behavior expects access to the workspace filesystem and outbound web requests to fetch brand DESIGN.md files; those capabilities are not reflected in the declared requirements and should be considered by the user.
✓ Persistence & Privilege
always is false (no forced inclusion) and autonomous invocation is allowed by default. The skill does not request persistent system-wide privileges in the manifest. Some templates persist state in localStorage and deck_stage uses localStorage and window.postMessage; these affect only generated pages and are normal for interactive artifacts but should be noted.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install cell-cc-design
  3. After installation, invoke the skill by name or use /cell-cc-design
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v0.1.0
Initial public release
Metadata
Slug cell-cc-design
Version 0.1.0
License MIT-0
All-time Installs 0
Active Installs 0
Total Versions 1
Frequently Asked Questions

What is CC Design?

High-fidelity HTML design and prototype skill for landing pages, slide decks, mobile mockups, interactive prototypes, dashboard explorations, design-directio... It is an AI Agent Skill for Claude Code / OpenClaw, with 90 downloads so far.

How do I install CC Design?

Run "/install cell-cc-design" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is CC Design free?

Yes, CC Design is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does CC Design support?

CC Design is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created CC Design?

It is built and maintained by cellinlab (@cellinlab); the current version is v0.1.0.

More Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191115 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 Comments