本文へ移動
cccskills
無料GitHub で公開

visual-system-architect

Act as a Global Design Director to produce a complete design system — color palette, typography scale, 8px grid, 30+ components, responsive patterns, animations, and WCAG AA accessibility. Exports design tokens (JSON), CSS variables, and Figma-ready docs. Use when building a brand's visual foundation for Figma Make or a design handoff.

日本語の概要は準備中です。原文の説明を表示しています。

連携ツールFigma
インストール方法を見る

含まれるファイル(1)

  • SKILL.md1.7 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

You are a Global Design Director tasked with building a scalable design system for the described brand.

Required Input

Provide the following before invoking:

  • Brand name: [BRAND]
  • Brand personality: MINIMAL / BOLD / LUXURY / PLAYFUL / MODERN / TECHNICAL (pick or describe)

Deliverables

Produce a complete, production-ready design system including:

1. Color System

  • Primary, secondary, semantic, and neutral palettes
  • Dark mode equivalents for every color

2. Typography Framework

  • 9-step type scale with font pairing rationale

3. Spatial System

  • 8px grid foundation with spacing tokens

4. Component Library

  • 30+ components with interaction states and usage rules

5. Responsive Layout Patterns

  • Breakpoints and adaptive behavior logic for all components

6. Animation Principles

  • Transition curves, durations, and micro-interaction animation philosophy

7. Accessibility Standards

  • WCAG AA compliance guidance and contrast ratios throughout

Export Formats

Deliver in three formats:

  1. Design tokens — JSON structure
  2. CSS variable declarations
  3. Figma-ready component documentation

Output Goal

This output will power the visual foundation inside Figma Make. Format all specs for direct handoff — no further interpretation required.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

Act as a Senior Accessibility Engineer to audit a page, component, or design against WCAG 2.2 AA. Produces a triaged finding list (critical/serious/moderate), focus-order map, contrast report, ARIA decision tree, and a screen-reader test plan. Use when shipping new UI, hardening an existing flow, or preparing for VPAT/accessibility conformance.

日本語の概要は準備中です。原文の説明を表示しています。

rajitsaha/100xprism102026年10月14日 更新

When the user wants to plan, design, or implement an A/B test or experiment — "split test," "variant copy," "multivariate test," "hypothesis," "statistical significance," "how long should I run this test," or comparing two versions. For tracking implementation, see analytics-tracking. For page-level conversion optimization, see page-cro.

日本語の概要は準備中です。原文の説明を表示しています。

rajitsaha/100xprism102026年10月14日 更新

When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, full variations — for any paid platform; 'ad copy variations,' 'RSA headlines,' 'bulk ad copy,' 'creative testing,' 'write me some ads.' For campaign strategy and targeting, see paid-ads. For landing page copy, see copywriting.

日本語の概要は準備中です。原文の説明を表示しています。

rajitsaha/100xprism102026年10月14日 更新

ai-seo

無料

When the user wants content cited by LLMs or surfaced in AI-generated answers — 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'AI Overviews,' 'optimize for ChatGPT/Perplexity/Claude,' 'AI citations,' 'zero-click search.' For traditional technical/on-page audits, see seo-audit. For structured data, see schema-markup.

日本語の概要は準備中です。原文の説明を表示しています。

rajitsaha/100xprism102026年10月14日 更新

When the user wants to set up, improve, or audit analytics tracking and measurement — "GA4," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "tracking plan," "attribution," "Mixpanel," "Segment," "are my events firing," or how to measure marketing results. For A/B test measurement, see ab-test-setup.

日本語の概要は準備中です。原文の説明を表示しています。

rajitsaha/100xprism102026年10月14日 更新

architect

無料

Architectural decision advisor for cloud, data, and SaaS distributed systems. Use when the user asks "should we use X or Y", weighs a tradeoff, or needs a decision matrix, scaling analysis, cost-at-scale review, data-tier design, multi-tenancy model, or API/resilience guidance. For full technical blueprints, use enterprise-design.

日本語の概要は準備中です。原文の説明を表示しています。

rajitsaha/100xprism102026年10月14日 更新

rajitsaha のスキルをすべて見る

このスキルの問題を報告する