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
Give it a Figma URL and it builds the project for you: clones an Astro, React or plain-HTML starter, moves your Figma variables into Tailwind, implements and reviews the design in phases, and starts the dev server.
by Masaaki Komori
Give it a Figma URL and it implements the design in your Astro, React or plain-HTML project, then reviews it against the Figma screenshot, tidies components and tokens, and cleans up Tailwind — each phase in its own sub-agent.
by Masaaki Komori
Builds several structurally different layouts of a whole page or just one section in one run, with shared colors and a comparison page. Astro, React or plain HTML with Tailwind CSS v4.
by Masaaki Komori
Interviews you on site type, look and pages, then builds accessible Astro, React or plain-HTML mockups with Tailwind CSS v4 that follow your CLAUDE.md, DESIGN.md and BRIEF.md. No Figma file needed.
by Masaaki Komori
Asks whether a Japanese landing page should feel busy or restrained, then proposes only the flourishes that fit: full-bleed sections, carousels, banner sliders, scroll reveals, vertical text. The rules are written in Japanese on purpose; you can prompt in English.
by Masaaki Komori
A guideline for AI agents building Japanese-language websites: fixes the defaults that look wrong in Japanese — stranded last-line characters, centered multi-line text, italics, text that is too small in real pixels, darkening hovers. The rules are written in Japanese on purpose; you can prompt in English.
by Masaaki Komori
A reasoning guide, not a generator — stops your agent's UI output from collapsing into "AI slop" (the same centered hero, 2-column split, safe nuance palette every time). Applies eye-tracking layout models and cognitive-bias countermeasures so structure and color choices come from real content, not statistical safety.
by Masaaki Komori
Rewrites headings, body copy, CTAs, and alt text inside already-built pages to match your BRIEF.md requirements — with optional volume control and behavioral-economics persuasion framing for landing pages, never fabricating data.
by Masaaki Komori
Interviews you about a site or app's business requirements — audience, value proposition, goal, tone — before any mockup or code gets written, and hands off the answers as a durable BRIEF.md file.
by Masaaki Komori
Sends implemented code to Figma at a chosen fidelity — from a pixel-perfect screenshot up to full components with variables bound to your real design tokens. Handles dynamic routes with a batch-export option.
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.