デザインのスキル

Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.

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

Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.

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

Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.

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

Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.

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

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

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

Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.

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

Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.

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

Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.

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

Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.

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

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

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

Search the OD Library (the global asset registry) and apply matching assets into the current project mid-task. Use when the user asks to reuse an image they captured/uploaded earlier, "pull a logo/screenshot from my library", or to find and drop a stored asset into the page being built.

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

Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

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

Editorial studio deck template in burgundy / blush / muted-gold palette. Use when users ask for premium manifesto or culture slides with pill tags, large typographic statements, principle cards, and guided keyboard/click navigation.

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

Transform rough ideas into fully-formed designs through structured questioning and alternative exploration. Useful early in concept work.

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

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

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

Extract a complete Brand Kit from a live website by driving the in-app browser. Use when a brand-extraction project opens with a site in the Browser tab, or when the user asks to "extract a brand", "pull the brand from <url>", "get the colors/fonts/logo from this site", or build a brand/design system from a reference website. Pairs with the agent-browser tool for measurement and pauses for the user when an anti-bot wall blocks the page.

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

Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".

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

Build a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work.

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

Apply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own.

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

Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.

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

Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.

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

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

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

Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.

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

Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.

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