Communitygithub.com

refoundai/design-systems

協助使用者建立並擴展設計系統。適用於建立元件庫、制定設計權杖、擴展品牌一致性,或決定何時投資設計系統。

design-systems 是什麼?

此技能旨在協助開發者與設計師建立、維護及擴展設計系統。它能引導使用者從零開始建立元件庫、定義設計權杖(如色彩、排版、間距),並確保品牌一致性在多個產品或平台間同步。此技能也協助評估何時投入資源建置正式設計系統,以及如何持續迭代與治理。支援與 Figma、Storybook 等工具的整合建議,並提供最佳實務與常見模式。透過結構化的引導與範例,此技能降低設計系統的建置門檻,並提升開發與設計團隊的協作效率。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/refoundai/lenny-skills/tree/main/skills/design-systems

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

design-systems 是做什麼的?

協助使用者建立並擴展設計系統。適用於建立元件庫、制定設計權杖、擴展品牌一致性,或決定何時投資設計系統。

概述

本技能提供指引與最佳實務,幫助您建立可擴展的設計系統。無論您是剛開始建立第一個共用元件,還是要將現有系統擴展至多個團隊或產品,都能獲得結構化的建議。

使用方式

  • 建立元件庫:定義元件架構、分類與共用模式。
  • 制定設計權杖:建立色彩、排版、間距等設計變數。
  • 擴展品牌一致性:確保所有產品與平台遵循一致的品牌規範。
  • 決定投資時機:評估團隊規模、產品數量與變更頻率,判斷何時該建立正式設計系統。

整合建議

  • Figma:使用設計權杖與變數,同步設計與開發。
  • Storybook:作為元件展示與測試的介面。
  • CSS 變數或 CSS-in-JS:在程式碼中實作設計權杖。

注意事項

  • 設計系統應隨需求演進,不需一次性到位。
  • 建立初期應專注於高頻使用的元件與權杖。
  • 與團隊達成共識,並建立治理機制以確保長期維護。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

refoundai/ai-evals

Help users create and run AI evaluations. Use when someone is building evals for LLM products, measuring model quality, creating test cases, designing rubrics, or trying to systematically measure AI output quality.

refoundai/ai-product-strategy

Help users define AI product strategy. Use when someone is building an AI product, deciding where to apply AI in their product, planning an AI roadmap, evaluating build vs buy for AI capabilities, or figuring out how to integrate AI into existing products.

refoundai/analyzing-user-feedback

Help users synthesize and act on customer feedback. Use when someone is analyzing NPS responses, processing support tickets, reviewing user research, synthesizing feedback from multiple channels, or trying to identify patterns in customer input.

refoundai/behavioral-product-design

Help users apply behavioral science to product design. Use when someone is designing for habit formation, reducing friction, applying psychology to UX, increasing retention through behavioral principles, or using nudges to influence user behavior.

refoundai/brand-storytelling

Help users craft compelling brand narratives. Use when someone is defining brand strategy, writing company positioning, creating pitch narratives, developing messaging frameworks, or trying to make their company story more memorable.

refoundai/building-a-promotion-case

Help users get promoted at work. Use when someone is preparing for a promotion conversation, building their case for advancement, trying to understand what's blocking their promotion, or figuring out how to get to the next level in their career.

refoundai/building-sales-team

Help users build and scale their sales organization. Use when someone is hiring their first salespeople, deciding when to bring on sales leadership, structuring sales compensation, or transitioning from founder-led sales.

refoundai/building-team-culture

Help users build and maintain strong team culture. Use when someone is defining team values, creating psychological safety, onboarding to a new team, navigating cultural change, or building distributed team norms.

refoundai/building-with-llms

Help users build effective AI applications. Use when someone is building with LLMs, writing prompts, designing AI features, implementing RAG, creating agents, running evals, or trying to improve AI output quality.

refoundai/career-transitions

Help users navigate career changes and pivots. Use when someone is considering a new role, transitioning into product management, evaluating job offers, taking a sabbatical, or feeling stuck in their current position.

refoundai/coaching-pms

Help users develop and coach product managers. Use when someone is managing PMs, creating development plans, running performance reviews, or trying to level up their PM team's capabilities.

refoundai/community-building

Help users build and grow product communities. Use when someone is starting a community, scaling an ambassador program, driving community-led growth, or choosing between user, developer, or partner communities.

refoundai/competitive-analysis

Help users understand and respond to competition. Use when someone is positioning against competitors, evaluating market threats, running competitive war games, or deciding how much to focus on competitors versus customers.

refoundai/conducting-interviews

Help users conduct effective hiring interviews. Use when someone is designing an interview loop, crafting interview questions, evaluating candidates in real-time, or building a structured interview process.

refoundai/conducting-user-interviews

Help users run better customer and user interviews. Use when someone is preparing for user research, planning discovery interviews, writing interview questions, analyzing interview findings, or trying to understand customer needs.

refoundai/content-marketing

Help users build content marketing strategies. Use when someone is starting a blog, building SEO, creating thought leadership content, or deciding on content formats and distribution channels.

refoundai/cross-functional-collaboration

Help users work effectively across functions. Use when someone is navigating PM-engineering relationships, resolving cross-team conflicts, building product trios, or improving handoffs between design, engineering, and product.

refoundai/defining-product-vision

Help users create compelling product visions. Use when someone is writing a vision statement, defining a long-term product direction, aligning teams on the future state, or distinguishing vision from strategy.

refoundai/delegating-work

Help users delegate effectively. Use when someone is struggling to let go of tasks, deciding what to delegate, building team autonomy, or balancing being hands-on vs hands-off.

refoundai/design-engineering

Help users understand and build design engineering capabilities. Use when someone is creating a design engineering function, hiring design engineers, or bridging the gap between design and engineering teams.

相關技能