cell-cc-design（细胞 CC 设计） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：cell-cc-design（细胞 CC 设计）
来源仓库：https://github.com/cellinlab/cell-cc-design
安装命令：
openclaw skills install cell-cc-design
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 OpenClaw 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

ClawHubOpenClaw

openclaw skills install cell-cc-design

简介

cell-cc-design 生成高保真 HTML 原型，支持界面设计和交互探索。

适合在 OpenClaw 中快速构建登陆页、仪表板或移动模型。
通过 clawhub 安装，输出可直接在浏览器预览。
使用前应确认品牌规范和响应式布局要求。cell-cc-design 属于效率类 Skill，可作为该场景下的辅助能力补充。
建议核对原始文档了解组件库和样式定制选项。

SKILL.md

name: cc-design
description: High-fidelity HTML design and prototype skill for landing pages, slide decks, mobile mockups, interactive prototypes, dashboard explorations, design-direction advising, and design review work. Use when Codex needs to design a screen, make an interface look polished, explore multiple visual directions, recommend a style direction before building, adapt an existing brand style, critique a design, or deliver a reviewable HTML-based visual artifact. Also use when the user mentions presentations, design systems, wireframes, UI mockups, motion studies, design philosophy, style selection, or asks to 'make it look good'. Do not trigger for pure content strategy, pure writing, or bitmap image generation alone.
metadata: {"openclaw":{"homepage":"https://github.com/cellinlab/cell-skills/tree/main/skills/cc-design"}}

CC Design

Overview

这个 Skill 只处理一类任务：

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

它覆盖的是：

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

它不处理：

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

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

Quick Start

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

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`	-	文件是否实际生成