Sumi plugin
A four-agent design crew for Claude Code that pulls fresh references from award sites, measures them and builds the interface.
- 59 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- The capture script opens third-party sites in a browser and saves their snapshots.
- The plugin writes design files and changes the project UI code.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/sumiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The capture script opens third-party sites in a browser and saves their snapshots.
- The plugin writes design files and changes the project UI code.
This is third-party code. Review the repository files before installing.
What it does
Sumi installs a crew of four agents and 45 design skills into Claude Code. `scout` pulls current references: Awwwards winners with jury scores, Mobbin screens and MotionSites animation recipes. `art-director` takes one signature trait from each reference and writes the direction as numbers. `ux-architect` designs flows from how shipped apps solve them. `critic` captures your build the same way as the references and compares. Commands: `/sumi:start` asks what you are working on and picks a play; `/sumi:inspo` builds a reference board; `/sumi:style`, `/sumi:page` and `/sumi:screen` build the interface; `/sumi:fix` repairs typical AI tells, `/sumi:grade` and `/sumi:roast` score, and `/sumi:a11y` checks accessibility. A capture script measures fonts, palette, easing curves and grid on a live page.
Who it is for. Designers and developers building landing pages and apps with an agent who want to avoid the generic look of generated pages.
Good fit when
- A Claude landing page looks like every other: a purple gradient and three buttons on the first screen.
- You want a reference board from real award-winning sites rather than recalled summaries.
- A finished build needs an honest score against strong references.
- Before release the interface needs an accessibility check.
Not a fit when
- You need a finished Figma mockup.
- There is no internet access to capture live references.
- You need exact conversion figures without checking: the README flags unverified claims.
Example request
Run /sumi:inspo for a coffee roaster landing page, loud but warm, and show the reference board.Limitations
References are pulled from third-party sites, so network access is needed and the capture script opens pages in a browser. The author notes that 54 of 84 extracted claims are not yet triaged, with most doubts about the `conversion-optimization-patterns` skill, so check its figures before quoting them to a client. The "take a trait, do not copy" principle does not remove responsibility for other people's work; licenses and rights to references are for the user to verify. The plugin targets Claude Code only.
How to disable. Remove the plugin with `/plugin uninstall sumi@sumi-marketplace` and the marketplace from `/plugin`. Reference board files remain in the project.
FAQ
Where do I start?
With `/sumi:start`: it asks in plain words what you are doing and picks the play. You do not need to learn the names of the 45 skills.
Who is in the crew?
Four roles: `scout` finds references, `art-director` writes the direction, `ux-architect` designs flows and `critic` compares the build with the references.
How do I fix a UI that looks generated?
Run `/sumi:fix` with a file, for example `/sumi:fix DashboardCard.tsx`. It replaces typical tells such as five font weights and a purple gradient.
How do I rate a finished page?
Use `/sumi:grade` for a score, `/sumi:roast` for the quick version and `/sumi:audit` for an unnamed problem.
Does Sumi copy other sites?
No, by the author's design it takes one trait from each reference and reshapes it. Responsibility for the result stays with the user.
Discussion
No questions or reviews yet.
Related
PluginsA motion design toolkit for coding agents: rules with numbers, frame self-review and synthesized sound, plus web sims at 60 fps
Claude Code plugin with 17 skills: task sizing, design review, TDD, fresh-context subagents and a PR after three human decisions.
A free Claude skill that writes a build spec, picks cinematic media, builds a landing page and checks it with screenshots
A kit of skills, tokens and rules that turns Claude into a design architect: DTCG tokens, components, accessibility and objective quality gates
The /awwwards skill for Claude Code: frontend art direction by Awwwards criteria, with typography, color, motion and WebGL.
The /fireworks-design command tries 6–8 styles in parallel in Claude Code, scores them on six criteria and polishes the best.
README in short
A plugin with a design agent crew, 45 skills and a live page capture script. It builds the interface from measured references and compares the result.