Skip to content
UXClaim
Design Systems

Flat Design System

Claude Code skill for building UIs in the instyle.group flat design system with warm-neutral palette, 8px grid, and superellipse corners.

View source More in Design Systems

What it does

This Claude Code skill teaches Claude how to build interfaces following the instyle.group flat design system — a minimalist approach using warm-neutral colors where background-color steps (not borders or shadows) separate regions. The system includes an 8px grid, Lato + Noto Sans JP typography, Major Third type scale, and superellipse corners.

How it works

When you ask Claude for a “flat dashboard” or similar design request, the skill auto-triggers. It provides drop-in CSS tokens and component snippets, a full design specification, and a project bootstrap template. The skill includes all brand assets (logo, favicon, OGP) and a live preview HTML file to see the target design.

Use cases

  • Generate flat-style dashboards, landing pages, and reports
  • Bootstrap new projects that adopt the flat design system long-term
  • Maintain consistent styling across multi-page designs
  • Build in both English and Japanese with automatic language support

Who benefits

Product designers and design teams using Claude Code to prototype interfaces. Teams adopting the instyle.group brand system benefit from instant consistency and faster iteration cycles.

Frequently asked questions

How do I install the flat design system skill?
Clone the repository to ~/.claude/skills/skill-design-system-flat. Claude Code automatically picks up skills from this directory on session start—no registration needed.
What's the difference between flat and liquid design systems?
The flat system uses warm-neutral colors and background steps for separation. The sister skill, skill-design-system-liquid, provides a translucent/glassy variant of the same brand identity.
Can I use this skill in multiple languages?
Yes. The skill supports both English and Japanese prompts. Ask Claude for "フラットなダッシュボード" or "Build a flat dashboard" and the skill will respond appropriately.
What CSS resources does the skill include?
The skill provides tokens.css (design variables), snippets.css (component styles for cards, buttons, inputs, type scale), and a full design specification in design.md for deeper reference.
How do I bootstrap a new project with this system?
Ask Claude to 'bootstrap a new project with skill-design-system-flat'. It will set up CLAUDE.md, CSS files, fonts, and basic layout automatically.
Can I preview the flat design system before using it?
Yes. Open examples/preview.html in any modern browser (Chrome, Edge, Safari) to see a reference implementation with all components.
What typography does the flat design system use?
The system uses Lato for English and Noto Sans JP for Japanese text, following a Major Third type scale for consistent sizing.
Are the instyle.group brand assets included?
Yes. The skill includes logo, favicon, and OGP images in the assets folder. These are licensed for use only in instyle.group projects.

Glossary

Auto-trigger
A skill feature where Claude automatically activates when it detects relevant keywords in your prompt, like 'flat dashboard' or 'flat design'.
Superellipse corners
A smooth, rounded corner shape that curves more gradually than standard border-radius, creating a softer, more refined aesthetic.
Design tokens
Reusable design variables (colors, spacing, typography) stored in CSS that ensure consistency across all UI components.
8px grid
A spacing system where all measurements are multiples of 8 pixels, creating visual rhythm and alignment consistency.
Major Third type scale
A typographic sizing system based on the 1.25 ratio, creating harmonious proportions between different text sizes.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.