FreeVideo
App window with zoom
- 365365 downloads
- 125125 likes
- 188188 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
Design direction for HTML pages and reports v1.0.0
Use this resource to design the look of an HTML page or report
New
- 365 downloads
- 132 likes
- 232 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install html-design-directionWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginThe agent sizes up the brief, looks first for an existing design system, then drafts a short plan (colors, type, layout) before writing code. You get a page with light and dark themes, a deliberate typography and copy written for the reader.
Mostly picked by
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
One big number
- 463463 downloads
- 223223 likes
- 100100 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
PalateKit Motion, the library
- 338338 downloads
- 198198 likes
- 249249 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three bars head to head
- 348348 downloads
- 133133 likes
- 182182 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Before / after slider
- 322322 downloads
- 248248 likes
- 238238 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three-card carousel
- 418418 downloads
- 157157 likes
- 101101 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Chat exchange
- 564564 downloads
- 127127 likes
- 161161 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Checklist ticking off
- 442442 downloads
- 233233 likes
- 160160 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: design principles, plan-then-code process and editorial register
Good fit for
- Creating a landing page or demo that doesn't look like a template
- Formatting an HTML report or plan to share
- Restyling an existing page with light and dark themes
Not for
- Producing a logo or images
- Building a full application with a database
- Faithfully reproducing a brand guide already locked by another tool
Tags
- html
- design
- typography
- palette
- dark theme
About
You say
"Create a presentation page for my ceramics studio, with its own visual identity and light and dark themes."
Skill published by plannotator under the MIT license.
Show moreShow less
Prerequisites
- You bring
- The subject, audience and purpose of the page and Your brand guide or DESIGN.md, if you have one
How to use it
- Copy the skill folder into your agent's skills folder.
- Describe the subject, the audience and the page's purpose.
- Approve the color and font plan, then let the agent build the page.
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- SKILL.md10.8 KB
Origin and licence
Modified by PalateKit
- Author
- plannotator
- Source
- github.com/plannotator/effective-html/tree/975b047f6da6874e176db54f048c0c31c30e9f65/skills/design-artifact
- Licence
- MIT
Notice
Version modifiée de « design-artifact » (plannotator, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
Does the skill publish my page online?
Only if you ask: at the end it offers to share the page with the third-party `tot` tool (installing it is optional). Nothing is published or installed without your consent.
Does it respect my existing brand guide?
Yes, it first looks for a DESIGN.md, tokens or a theme in the project and applies them before its own choices.