design-tokens は何をしますか？
選択した美学的哲学に基づいて、CSS変数またはTailwind設定のデザイントークンファイルを生成します。ライト/ダークモードのパレット、スペーシングスケール、タイプランプ、コンポーネントレベルのトークンを含みます。新しいプロジェクトの開始、ビジュアルシステムの確立、トークンの設定、または「トークン」や「デザインシステム」という言及がある場合に使用します。
選択した美学に基づいて、CSS変数またはTailwind設定のデザイントークンファイルを生成します。ライト/ダークモードのパレット、スペーシングスケール、タイプランプ、コンポーネントレベルのトークンを含みます。新しいプロジェクトの開始、ビジュアルシステムの確立、トークンの設定、または「トークン」や「デザインシステム」という言及がある場合に使用します。
このスキルは、選択した美学的哲学に基づいてデザイントークンファイルを生成することで、一貫性のあるビジュアルシステムの迅速な確立を支援します。CSS変数またはTailwind CSS設定ファイルとして出力を選択でき、開発者の好みの開発環境に柔軟に対応します。生成されるトークンセットには、ライトモードとダークモードの両方のカラーパレット、体系的なスペーシングスケール、タイポグラフィのタイプランプ、および個々のUIコンポーネントを対象としたコンポーネントレベルのトークンが含まれます。これにより、新しいプロジェクトの開始時や既存のプロジェクトへのデザインシステム導入時に、デザインと開発のギャップを埋める実用的なツールとなります。主にClaude CodeやCursorなどのAIエージェントと連携して使用されることを想定しています。
npx skills add https://github.com/julianoczkowski/designer-skills/tree/main/skills/design-tokensInstalled? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
選択した美学的哲学に基づいて、CSS変数またはTailwind設定のデザイントークンファイルを生成します。ライト/ダークモードのパレット、スペーシングスケール、タイプランプ、コンポーネントレベルのトークンを含みます。新しいプロジェクトの開始、ビジュアルシステムの確立、トークンの設定、または「トークン」や「デザインシステム」という言及がある場合に使用します。
This repo contains 7 individual skills — each has its own dedicated page.
Break a design brief into an ordered checklist of independently buildable tasks using vertical slices. Saves as a markdown checklist. Use when user wants to break down work, create tasks from a brief, plan implementation order, or mentions "tasks" or "breakdown".
Create a design brief through an interactive interview, codebase exploration, and experience design decisions. Saved as a markdown file in the project. Use when user wants to write a design brief, plan a new feature or page, define a UI direction, or mentions "brief".
Run the full design-to-build workflow as a guided sequence. Orchestrates all designer skills in order, from grilling through review. Use when user wants to go through the complete design process, start a project from scratch, run the full flow, or mentions "design flow" or "full workflow".
Run a structured design critique against the brief and codebase. Checks visual hierarchy, consistency, responsiveness, accessibility, and aesthetic fidelity. Use when user wants a design review, critique, QA pass, polish pass, or mentions "review" after building.
Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional attention to aesthetic details and creative choices that avoid generic AI output.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, challenge an approach, or mentions "grill me".
Define the structural layer of a product or site before visual design begins. Covers navigation, content hierarchy, page structure, URL patterns, and user flows. Use when user wants to plan site structure, define navigation, map user flows, organize content, or mentions "IA" or "information architecture".
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.