Working independently since 2001, I bridge the gap between UI/UX design, design systems, and modern front-end engineering. As an author of numerous web design books in Japan, I specialize in Figma enterprise training, design token architecture, and production-ready frontend development. Also ranked among the Top 500 all-time most viewed and downloaded creators globally on Unsplash. In recent years, I have focused on building AI-driven workflows that seamlessly connect Figma to code—empowering designers and developers to build better products faster.
by Masaaki Komori
Generates a lint-clean DESIGN.md in Google's design.md format from your codebase, a Figma file, an existing DESIGN.md URL or a pasted spec, so every AI agent builds with the same colors, type and components.
by Masaaki Komori
Scores a Figma frame on how well AI can turn it into code: layer naming, auto-layout, variables and tokens, and component structure. Returns a 20-point report with concrete fixes to make in Figma.
by Masaaki Komori
Checks every text node in a Figma frame against WCAG AA contrast — including text on photo and gradient backgrounds — before a single line of code gets written.
by Masaaki Komori
Picks a harmonious font-size scale for your Tailwind v4 project — one base size and one named ratio, applied everywhere from text-xs to h1.
by Masaaki Komori
Reviews Tailwind CSS code across 5 dimensions — class redundancy, v3→v4 migration, design token usage, and accessibility (both Tailwind classes and HTML structure) — then applies the fixes you approve.
by Masaaki Komori
Pulls Figma Variables and Text Styles into your Tailwind v4 @theme — and catches the naming collisions that would otherwise silently override Tailwind's own defaults project-wide.
by Masaaki Komori
Reads your Tailwind v4 @theme tokens and writes them into Figma as properly typed, categorized Variables — colors, type scale, spacing, radius, and border, all in one pass.
by Masaaki Komori
Picks and runs up to five Figma cleanup passes on one frame in the right order: auto layout, layer names, variables and Text Styles, components, and a final audit. Needs the five skills installed.
by Masaaki Komori
Audits a Figma file that already has components and variables, ranks what is still missing, and implements what you approve: component properties, variant merges, bindings, and cleanup.
by Masaaki Komori
Finds the repeated buttons, cards, header, and footer in a Figma frame, turns them into components with variants, and replaces the originals with instances, checking each step with you.
by Masaaki Komori
Turns the hardcoded colors, font sizes, spacing, and text settings in a Figma frame into bound Color, Typography, and Spacing variables plus Text Styles, without changing how the frame looks.
by Masaaki Komori
Scores a Figma component or component set on variant naming, component properties, layer structure, auto layout, and design tokens. Returns a 25-point report with concrete fixes to make in Figma.
by Masaaki Komori
Turns a hand-positioned or captured Figma frame into a clean auto-layout hierarchy with semantic layer names, section by section, checking each step against the original screenshot.
by Masaaki Komori
Finds auto-generated Figma layer names (Frame 12, Group 4, Rectangle 7) in a whole frame, proposes semantic names from role and context, and renames only what you approve.
by Masaaki Komori
Converts a plain CSS or Sass site to Tailwind v4 classes as a fast first pass, checks every class against Tailwind's own scale, and lists exactly what you still have to fix by hand.
by Masaaki Komori
Checks every text node in a Figma frame against WCAG AA or AAA, flags text on photos as manual checks, and — only after you confirm — fixes failing colors in the file itself.
by Masaaki Komori
Migrates a static HTML + Tailwind site into a new Astro 7 project, extracting layouts and typed components, converting images to <Image />, and porting or rewriting your JS, without touching the original.
by Masaaki Komori
Retrofits an existing Astro site with locale routing, a translation dictionary, a language switcher, and hreflang tags — using Astro's own built-in i18n APIs, no external library required.