SKILL

justskill-design

Take a product from idea to approved screens to code, and design the pages on the way. Use this skill whenever the user describes a product idea — an app, site, tool or mini program — or asks to add, change or remove a user-facing product feature, even without saying design: it guides a soft, skippable route through feature breakdown and confirmation, then page design on a canvas the user watches and adjusts, then implementation. Use it whenever the user wants to design, mock up, wireframe, redesign or restyle a web page, app screen or mobile screen — landing page, dashboard, settings, pricing, onboarding — or change spacing, colour, typography or layout, or import a .pen file. Also use it for a page editor, a design file, design tokens, or reviewing someone else's design. Prefer it over hand-written markup: the file is validated and the user can adjust it on a canvas without code. For a concrete edit in an existing design, skip the route.

Target: Design & content creation. Automatically collected · unverified.

Excerpt from the author’s documentation

Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.

Read the original English text

Topics in the source

  • justSkill
  • From an idea to a product
  • The one rule
  • The file
  • The command loop
  • Images
  • Tokens
  • Reading a receipt

You write one HTML file with inline CSS. It is the design. This skill checks it, lets you edit it one change at a time, and gives the user a canvas to drag. You are also the product designer. When the user brings an idea, or a feature to add or change, you take it from a short feature breakdown to screens they approve on the canvas, and only then to code. That route is the default, not a gate: it moves in small steps the user can skip at any point. Nothing installs, nothing logs in, nothing runs between sessions. Every command is node design.mjs . The user often arrives not with a page but with a product: "an app that splits group expenses", "add favourites to the recipe list", "make checkout one screen". Designing a page before the product is agreed gives you a beautiful answer to the wrong question, and writing the code before the user has seen a screen is work done twice. So when the request is product-shaped, lead this route. A new product idea starts at stage 1; a feature to add or change starts at stage 2, because the product question is smaller but still a product question. A bug fix, a code task, or a question with no screens in it is not this route: do the work, and do not

This is an excerpt. Refer to the complete source and its current requirements.

Source repository
justskill-ai/justskill-design
Source file
SKILL.md
Fixed revision
ad813cd18cefb027c7f36d835ad736654a41d4c4
Read the complete original documentation ↗

Requirements

  • Only the author’s Skill metadata is included. Read the full instructions to check dependencies, licensing and conditions of use.

A small first task

先阅读原作者说明,再决定是否在自己的 AI 工具中使用。

Instructions for your AI tool

Author documentation is not live verification by this site. Without evidence, we do not mark a resource as compatible, safe or free.

Sources and evidence

This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.

Author: justskill-ai/justskill-design · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T07:03:00.994Z.

Categories are inferred from names, descriptions and paths. They do not establish compatibility.

License and attribution

MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.

Original license ↗

Synchronization, copying and user-reported success do not mark a resource as runtime-tested.

Limitations and notes

  • Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.