design-foundation
✓建立或正式化您的設計系統基礎。創建設計標記（顏色、排版、間距、陰影、邊框），定義組件架構，記錄設計原則，並構建可實現一致性和可擴展性的結構。適用於 Tailwind CSS 和與框架無關的方法。
SKILL.md
A design foundation is the bedrock upon which all great products are built. It's not just a collection of colors and fonts—it's a system of decisions that enables your team to build consistently, quickly, and with intention.
This skill helps you create or formalize your design foundation, whether you're starting from scratch or documenting what already exists. It covers design tokens, component structure, design principles documentation, and the governance model for your system.
Modern design systems are built on the concept of design tokens—named entities that store design decisions. Rather than hardcoding colors or spacing values throughout your codebase, tokens centralize these decisions, making them easy to maintain, theme, and scale.
建立或正式化您的設計系統基礎。創建設計標記（顏色、排版、間距、陰影、邊框），定義組件架構，記錄設計原則，並構建可實現一致性和可擴展性的結構。適用於 Tailwind CSS 和與框架無關的方法。 來源：sanky369/vibe-building-skills。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/sanky369/vibe-building-skills --skill design-foundation- 分類
- </>開發工具
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 design-foundation？
建立或正式化您的設計系統基礎。創建設計標記（顏色、排版、間距、陰影、邊框），定義組件架構，記錄設計原則，並構建可實現一致性和可擴展性的結構。適用於 Tailwind CSS 和與框架無關的方法。 來源：sanky369/vibe-building-skills。
如何安裝 design-foundation？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/sanky369/vibe-building-skills --skill design-foundation 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/sanky369/vibe-building-skills
詳情
- 分類
- </>開發工具
- 來源
- skills.sh
- 收錄時間
- 2026-02-01