Code · Claude Sonnet 5.5
The component in the spec, following the skill
The component in the spec, following the skill, with the wired illustration. Reference (Spec.md): # Component spec - **Component:** A pricing section for Inkwell, a note-taking app, with three plan cards (Free, Pro, Team) and a large illustration above them. Pro is highlighted as the one to choose. - **Headline:** Pick the plan that fits your notebook - **Text:** Inkwell keeps your notes tidy, searchable and in sync on every device. Start free, and upgrade when your pages fill up. - **Buttons:** Start for free (Free, secondary), Choose Pro (primary, the only accent button), Contact us (Team, secondary) - **Look:** Warm off-white paper background (#FAF6EE), deep ink-blue text (#1B2A4A), one ink-blue accent for the Pro button, soft 1 px warm grey border, rounded 16 px cards, generous spacing, a serif headline with a clean sans-serif for the rest Reference (html-component SKILL.md): --- name: html-component description: Builds one self-contained, accessible UI component in a single HTML file, ready to paste into any site. Use for hero banners, pricing cards, feature grids, testimonials, navbars and other sections. --- # HTML component ## Read first Spec.md for what the component is, its content, its states and its look; the reference and illustration wired in. ## Build - One HTML file: semantic markup, a <style> block and, only if needed, a small <script>. No frameworks or external files except web fonts. - Everything scoped under one root class, so it can be pasted anywhere without clashing. - Colours, radii and spacing as CSS custom properties on the root, so it's easy to restyle. - Responsive from 320 px to full width, with the layout changing at one breakpoint at most. - Hover, focus-visible and active states for everything clickable; a respectful prefers-reduced-motion. - The wired illustration shown whole, with rounded corners where it sits on a card. ## Look - One type scale (e.g. 48 / 20 / 15) and one accent colour from the spec, for the primary action only. - Spacing on a 4 or 8 px grid, generous inside the component; a radius and border that match the reference. - The illustration large and given room, beside or above the words, never squeezed into a corner. ## Copy Real words from the spec, short and specific. One primary action. ## Avoid Lorem ipsum, fixed widths that break on phones, inline styles everywhere, and animation that never stops.
Meng To@shadownessguy0097- Model
- Claude Sonnet 5.5
- Made by
- Meng To
- Shared
- Likes
- 0
Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.
