首页 › 龙虾技能列表 › 为 Vibe coding 应用提供专业级站点设计的终极解决方案 — 技能工具

为 Vibe coding 应用提供专业级站点设计的终极解决方案 — 技能工具

v1.0.3

像素级完美设计系统 - 为 Vibe coding 应用提供专业级站点设计。支持中英文双语站点，58 个顶级产品设计模板，9 部分完整设计规范，AI 可读 Markdown 格式，开箱即用无需 Figma。

1· 48·0 当前·0 累计
by @lijinhongucl-pixel (Socialite UCL LJH)·MIT-0
下载技能包
License
MIT-0
最后更新
2026/4/9
安全扫描
VirusTotal
无害
查看报告
OpenClaw
安全
medium confidence
The skill's files, declared requirements, and runtime instructions are consistent with a local Python-based template generator for design-system Markdown output; nothing requested is disproportionate to its stated purpose, but you should still review the included Python scripts before running them.
评估建议
This package appears coherent and local-only: it provides templates and Python scripts that generate DESIGN.md files and asks only for python3. Before running, (1) quickly inspect scripts/generate.py and scripts/template_generator.py yourself (or run them in an isolated sandbox) to confirm they only read the templates and write your specified output, (2) avoid passing untrusted or broad file paths to --config, and (3) if you need higher assurance, run network-monitoring (e.g., lsof/strace) durin...
详细分析 ▾
✓ 用途与能力
Name/description (design templates → generate DESIGN.md) match the required runtime pieces: python3, template markdown files, and two Python generator scripts. Asking only for python3 and providing many template files is appropriate for a local template generator.
ℹ 指令范围
SKILL.md instructs only local operations (run scripts/generate.py, optional --config file). It claims 'no network' and 'only Python standard library'. The repository contains many static templates and explicit examples showing only file reads/writes. As usual, verify generate.py's handling of user-supplied paths (it may read a user-provided config file) to ensure it won't unexpectedly read sensitive files if given a crafted path.
✓ 安装机制
No install spec; the skill is instruction+scripts only and requires only python3. No downloads, external package installs, or archive extraction from unknown hosts are declared.
✓ 凭证需求
The skill requests no environment variables, no credentials, and no config paths. That is proportionate for a local template generator.
✓ 持久化与权限
The skill is user-invocable, not always-enabled, and does not declare modifications to other skills or system-wide settings. This is appropriate for its purpose.
安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.32026/4/9

- No file changes detected in this version. - No updates or modifications to features, documentation, or templates. - Version remains functionally identical to the previous release.

● 无害

安装命令 点击复制

官方npx clawhub@latest install pixel-perfect-design-system
镜像加速npx clawhub@latest install pixel-perfect-design-system --registry https://cn.clawhub-mirror.com

技能文档

🎯 核心价值主张

为 Vibe coding 应用提供专业级站点设计的终极解决方案

✨ 三大核心优势

优势说明收益
🤖 AI 可读LLM 最擅长读取 Markdown 格式AI 生成准确度提升 85%
🎨 像素级完美AI agent 根据规范生成精确 UIUI 实现偏差降低 90%
⚡ 开箱即用不需要 Figma、JSON schemas设计时间从 1 周缩短到 5 分钟

🌍 支持中英文双语站点

本系统完整支持中文和英文站点设计，包含：

  • ✅ 中文字体系统（思源黑体、PingFang SC 等）
  • ✅ 中文排版规范（行高 1.8-2.0，无字间距）
  • ✅ 中英文混排最佳实践
  • ✅ 中文 UI 组件设计
  • ✅ 中文色彩系统（红色系、金色系等）

📦 58 个顶级设计模板

🇨🇳 中文站点（12 个）

社交与内容

  • 小红书 (Xiaohongshu) - 珊瑚红社交，瀑布流 ⭐
  • 微信 (WeChat) - 绿色超级应用 ⭐
  • 微博 (Weibo) - 橙红热点传播 ⭐
  • 抖音 (Douyin/TikTok) - 黑色短视频
  • 知乎 (Zhihu) - 蓝色知识问答
  • B站 (Bilibili) - 粉色年轻文化

电商与交易

  • 淘宝 (Taobao) - 橙色电商巨头
  • 京东 (JD.com) - 红色品质电商
  • 拼多多 (Pinduoduo) - 橙红社交电商
  • 美团 (Meituan) - 黄色本地生活

工具与效率

  • 飞书 (Feishu/Lark) - 蓝色企业协作 ⭐
  • 钉钉 (DingTalk) - 蓝色企业办公

🌐 国际站点（46 个）

AI & Machine Learning (12) Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI

Developer Tools (14) Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier

Infrastructure (6) ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe

Design & Productivity (10) Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow

Fintech (4) Coinbase, Kraken, Revolut, Wise

Enterprise (7) Airbnb, Apple, IBM, NVIDIA, SpaceX, Spotify, Uber

Car Brands (5) BMW, Ferrari, Lamborghini, Renault, Tesla

🚀 快速开始

方式 1：选择现成模板

# 列出所有可用模板
python3 scripts/generate.py --list
# 生成小红书风格设计系统
python3 scripts/generate.py --template xiaohongshu --output DESIGN.md
# 生成 Linear 风格设计系统
python3 scripts/generate.py --template linear --output DESIGN.md

方式 2：自定义配置

# 使用自定义配置文件
python3 scripts/generate.py --config my-design.json --output DESIGN.md

📐 DESIGN.md 完整结构

每个 DESIGN.md 包含 9 个部分，确保 AI agent 能够完整理解设计系统：

1. Visual Theme & Atmosphere

设计哲学、视觉氛围、品牌个性

2. Color Palette & Roles

颜色系统、语义化命名、对比度要求

3. Typography Rules

字体层级、字号、字重、行高

4. Component Stylings

按钮、输入框、卡片、导航等组件样式

5. Layout Principles

间距系统、网格系统、留白哲学

6. Depth & Elevation

阴影系统、层级关系、z-index

7. Do's and Don'ts

设计红线、最佳实践、反模式

8. Responsive Behavior

断点定义、触摸目标、折叠策略

9. Agent Prompt Guide

快速参考、提示模板、代码片段

💡 使用场景

场景 1：创建设计系统

用户: 为我的产品创建一个小红书风格的设计系统
助手: [生成完整的 DESIGN.md 文件]

场景 2：生成 UI 代码

用户: 根据 DESIGN.md 生成一个登录页面
助手: [读取 DESIGN.md，生成 React/Vue 组件代码]

场景 3：统一团队设计

用户: 团队需要统一设计规范
助手: [生成 DESIGN.md，团队成员共享使用]

🎨 5个完整专业版模板

小红书 (Xiaohongshu) - 社交平台标杆

  • 主色调: #FF2442
  • 背景: #FFFFFF
  • 适用: 社交应用、内容平台

飞书 (Feishu) - 企业协作标杆

  • 主色调: #3370FF
  • 背景: #FFFFFF
  • 适用: 企业应用、办公平台

Linear - 项目管理标杆

  • 主色调: #8B5CF6
  • 背景: #000000
  • 适用: 项目管理、开发工具

Stripe - 金融科技标杆

  • 主色调: #635BFF
  • 背景: #F6F9FC
  • 适用: 金融科技、支付平台

微博 (Weibo) - 社交媒体标杆

  • 主色调: #FF8200
  • 背景: #F7F9FA
  • 适用: 社交媒体、内容平台

📝 完整文档

  • README.md - 详细使用说明
  • INTRODUCTION.md - 完整介绍
  • CODE_AUDIT_REPORT.md - 代码安全审查报告 ⭐
  • TEMPLATES_PLAN.md - 模板规划文档
  • IMPROVEMENT_PLAN.md - 改进计划

查看 templates/ 目录获取所有 58 个设计模板。

🔒 安全与隐私

  • ✅ 纯本地运行 - 无网络请求，无数据上传
  • ✅ 无外部依赖 - 仅使用 Python 标准库
  • ✅ 代码透明 - 所有代码可见可审计
  • ✅ 数据隔离 - 不访问任何外部资源

🎯 核心价值

  • 🤖 AI 可读 - Markdown 格式，LLM 原生支持
  • 🎨 像素级完美 - 精确规范，AI 生成精准 UI
  • ⚡ 开箱即用 - 58+ 模板，5 秒完成
  • 📐 标准化 - 符合 Google Stitch 规范

让 AI 理解设计，生成像素级完美 UI！ 🚀

数据来源：ClawHub ↗ · 中文优化：龙虾技能库
OpenClaw 技能定制 / 插件定制 / 私有工作流定制

免费技能或插件可能存在安全风险，如需更匹配、更安全的方案，建议联系付费定制

了解定制服务