StripeやLinearなど54のサイトの配色・文字・余白を参考に、HTML/CSSのページを制作します。部品や画面幅に応じた表示も揃えるスキル。
- Stripeを参考にしたLP制作
- Linearを参考にしたダッシュボード制作
- 資料サイトのデザイン制作
27 件 ・ 関連度順
概要と使いどころ
StripeやLinearなど54のサイトの配色・文字・余白を参考に、HTML/CSSのページを制作します。部品や画面幅に応じた表示も揃えるスキル。
Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating.
日本語の概要は準備中です。原文の説明を表示しています。
Critique a rendered screen's colour — contrast ratios, palette coherence, and semantic meaning. Use when reviewing one screen. For a product-wide WCAG audit use `accessibility-audit` (design-systems); for building the palette use `color-system` (ui-design).
日本語の概要は準備中です。原文の説明を表示しています。
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).
日本語の概要は準備中です。原文の説明を表示しています。
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).
日本語の概要は準備中です。原文の説明を表示しています。
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
日本語の概要は準備中です。原文の説明を表示しています。
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
日本語の概要は準備中です。原文の説明を表示しています。
Define version control for design files, components, and libraries — branching, naming, and release. Use when file history is chaotic. For design system contribution rules, use `design-system-governance` (design-systems).
日本語の概要は準備中です。原文の説明を表示しています。
Create adoption strategy and enablement materials to drive design system usage. Use when the system exists but teams ignore it. For contribution and versioning rules, use `design-system-governance` (design-systems).
日本語の概要は準備中です。原文の説明を表示しています。
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use `design-token-audit` (designer-toolkit); for WCAG gaps use `accessibility-audit` (design-systems).
日本語の概要は準備中です。原文の説明を表示しています。
Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use `design-qa-checklist`; for reusable library components use `component-spec` (design-systems).
日本語の概要は準備中です。原文の説明を表示しています。
Audit token usage across a product for coverage, drift, and hard-coded values. Use when tokens exist and you suspect they are being bypassed. For defining tokens in the first place, use `design-token` (design-systems).
日本語の概要は準備中です。原文の説明を表示しています。
Design systems leadership across component libraries, design tokens, and design-dev collaboration. Use when architecting a token system, building a component library, defining governance, or generating cross-platform tokens.
日本語の概要は準備中です。原文の説明を表示しています。
Product design across UI/UX, design systems, prototyping, and user research. Use when creating user journey maps, building wireframes, defining design tokens and component systems, planning usability tests, or establishing design principles.
日本語の概要は準備中です。原文の説明を表示しています。
Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating.
日本語の概要は準備中です。原文の説明を表示しています。
World-class design systems architecture - tokens, components, documentation, and governance. Design systems create the shared language between design and engineering that makes products feel cohesive at any scale. Use when "design system, component library, design tokens, atomic design, style guide, theme, theming, design scale, component api, variant, figma tokens, style dictionary, design-system, tokens, components, theming, documentation, figma, accessibility, versioning" mentioned.
日本語の概要は準備中です。原文の説明を表示しています。
Lists all Stitch Design Systems, optionally filtered by project. Returns asset names needed for apply and update operations.
日本語の概要は準備中です。原文の説明を表示しています。
Design system lookup, CSS best practices, and AI-driven UI component generation via MCP tools
日本語の概要は準備中です。原文の説明を表示しています。
Build and govern scalable design systems with tokens, components, documentation, and adoption strategy.
日本語の概要は準備中です。原文の説明を表示しています。
Creates comprehensive documentation for design systems - token tables, usage guidelines, component examples, and accessibility notes. Use after generating tokens to create developer-friendly docs.
日本語の概要は準備中です。原文の説明を表示しています。
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
日本語の概要は準備中です。原文の説明を表示しています。
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
日本語の概要は準備中です。原文の説明を表示しています。
Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo.
日本語の概要は準備中です。原文の説明を表示しています。
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
日本語の概要は準備中です。原文の説明を表示しています。