Sketch — Throwaway HTML mockups: 2-3 design variants to compare
Sketch — Throwaway HTML mockups: 2-3 design variants to compare
Start with meaning, then move to detail.
This lesson explains Sketch — Throwaway HTML mockups: 2-3 design variants to compare as part of getting started with Hermes correctly. You will learn what it does, when it matters, and the smallest safe test that proves it works.
If you are new, do not memorize names. Focus on three questions: what problem does this solve, what access does it need, and how can you verify the result?
For practice, inspect the first example, identify its effects, run it on test data, and compare the result with the source claim.
For advanced readers, inspect Skill metadata, Reference: full SKILL.md, When NOT to use this, then verify failure modes and version compatibility.
No prior experience is required; follow the steps on a safe test setup first.
A clear outcome before you read.
- Understand Sketch — Throwaway HTML mockups: 2-3 design variants to compare without assumed prior knowledge.
- Separate the source description from what still needs testing in your environment.
- Read the first command and identify its inputs and outputs before copying it.
Short definitions before the details.
- Skill
- An instruction bundle that teaches Hermes a repeatable workflow without necessarily adding an external service.
Throwaway HTML mockups: 2-3 design variants to compare
What does the source say, and in what order?
- 01Skill metadata
Start here to understand the core idea or structure.
- 02Reference: full SKILL.md
Read this after the foundation, then connect it to the previous step.
- 03When NOT to use this
Read this after the foundation, then connect it to the previous step.
- 04If the user has the full GSD system installed
Read this after the foundation, then connect it to the previous step.
- 05Core method
Read this after the foundation, then connect it to the previous step.
- 061. Intake (skip if the user already gave you enough)
Read this after the foundation, then connect it to the previous step.
- 072. Variants (2-3, never 1, rarely 4+)
Read this after the foundation, then connect it to the previous step.
- 083. Make them real HTML
Read this after the foundation, then connect it to the previous step.
- 094. Variant README
Read this after the foundation, then connect it to the previous step.
- 10Variant: stance name
Finish here to verify the result and special cases.
Copy only after you understand the effect.
intake → variants → head-to-head → pick winner (or iterate)sketches/
├── 001-calm-editorial/
│ ├── index.html
│ └── README.md
├── 001-utilitarian-dense/
│ ├── index.html
│ └── README.md
└── 001-playful-split/
├── index.html
└── README.mdbrowser_navigate(url="file:///absolute/path/to/sketches/001-calm-editorial/index.html")
browser_vision(question="Does this layout look clean and readable? Any visible bugs (overlapping text, unstyled elements, broken images)?")Read the first command and identify its inputs and outputs before copying it.
Match every command to your installed Hermes version, review the files and accounts it can reach, and use non-sensitive data for the first test. If this explanation differs from the source, the official source wins.