Mockup in figma
A stack of skills for your AI agent, made for people starting from zero. 103 skills and 149 project briefs — load one into Codex, Claude Code, Copilot, Gemini, or Cursor and do the thing.
npx -y skills add protosphinx/sphinxstack --skill mockup-in-figmaAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- 17 days oldThe repository was created 17 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Mock the screen in Figma before building it. Free tier, frames, real content, and a share link for feedback. Use when they say "design it first", "make a mockup", "learn Figma", or are about to build a UI they haven't sketched.
SKILL.md
3.1 KB, as published. Nobody here has run it
mockup-in-figma
Help someone mock a real screen — a page of their site, an app view, a dashboard — in Figma before any code exists. The point is to make layout mistakes where they cost minutes. Teach only the features this screen needs. Use available UI controls when authorized; otherwise guide precisely and ask for screenshots at checkpoints.
Setup
Check Figma's current official plan limits before creating the file. Use the person's own account and avoid any paid feature the chosen plan does not include. Have them create a file named after the project. The four tools that matter: Frame (F), Rectangle (R), Text (T), and Move (V). Plus two habits: use the platform-appropriate zoom shortcut, and rename layers as they go. Introduce anything else only when the mock demands it.
Mock the real screen
- Decide what screen and for whom: what does the visitor need to do here? List the elements that answer that — usually 5–8 things (header, headline, action button, content blocks).
- Frame at a real size: 1440 wide for desktop, 390 for mobile. Pick whichever their users will mostly be on; do the other later if time allows.
- Gray boxes first. Block every element as rectangles before any styling — this is the layout argument, have it now. Propose two arrangements with a one-line trade-off and let them choose.
- Real content in. Their actual headline, their nav labels, their button text. Placeholder text hides layout problems that real text exposes — a mock full of lorem ipsum tests nothing.
- Style with restraint: one or two fonts, their brand colors if a kit exists, otherwise black/white plus one accent. 8px spacing steps keep gaps consistent without thinking.
Just enough components
When an element repeats — a button, a card — make it a component (cmd+alt+K) and reuse instances. Teach it the first time they copy a button, in one line: change the component once, every copy follows. Stop there. Auto layout is worth showing only if lists or cards are central to the screen; variants and prototyping are not today's lesson.
Share and pressure-test
- Share link, "anyone with link can view", sent to one real person who matches the audience, with one question: "what would you click first?" Their answer tests the hierarchy.
- Walk the mock together against the original goal: can the visitor do the thing? Fix what fails in the mock, where it is cheap.
Done
- A named Figma file with the screen mocked in real content, at least one reused component, a working share link, and one round of outside feedback acted on
- Share permissions checked in a signed-out view; no unintended private files or edit access exposed
If the next step is building it, the mock is the spec — carry the exact sizes, hex values, and spacing into the build (build-website if it is a site).