Charlota shares reusable Framer skills for AI web design

• Five reusable Framer skills cover a web project from wireframes through client updates in 0xCharlota's toolkit.
• Typography fixes start with shared text styles so later pages inherit them, according to 0xCharlota.
• Client updates become guided CMS intake in her /add-page proposal, which collects content and saves a draft.

A wireframe command keeps the agent in gray boxes until the designer is ready for polish, a welcome brake on premature art direction. Framer's Skills announcement includes another useful detail: saved instructions survive when someone remixes the project.

Skills are saved agent instructions that live inside a Framer project, where collaborators can use them.

Framer says /skills can create or update instructions from a conversation that produced a repeatable result. The agent can also load a skill automatically when its description matches the task, without an explicit slash command.

The company's writing guide distinguishes hard requirements written as must from defaults written as prefer.

After pasting page content, 0xCharlota invokes /wireframe-mode with three constraints:

• Grayscale only.
• One typeface.
• Gray boxes in place of images.

She says finished-looking pages can pull client meetings into debates about button colors while the copy and structure are still unresolved.

The typography skill edits shared text styles before individual layers and keeps text connected to CMS fields. Font choices, sizes, colors and wording are protected, apart from punctuation and typographic symbols.

Its eight passes cover:

1. Optical size: match the font's optical-size axis to its size; use Display cuts at 32px and above, Text cuts below.
2. Tracking: adjust spacing by size, with no negative tracking on lowercase body text.
3. Line height: use size-dependent defaults, including 1.5 for body text at 15–20px.
4. Measure: target 66 characters per line within a 45–75 range; allow 35–45 on phones without shrinking body text below 16px.
5. Line breaks: balance headings and use nonbreaking spaces to prevent widows and separate numbers from their units.
6. Numbers: use tabular, lining figures for prices, statistics, tables, counters and timers.
7. Punctuation: standardize quotes, apostrophes and typographic symbols while leaving URLs, code and CMS slugs alone.
8. Weights and styles: use loaded font weights rather than simulated ones; reserve underlining for links.

Before finishing, the instructions require checks at Desktop, Tablet and Phone sizes, plus a report of changes and unsupported font features.

The launch skill asks the agent to audit every published page and CMS template, rather than only the current canvas.

The checklist has five parts:

1. Visuals and accessibility: contrast, focus states, clipping and a phone check at 375px, including 44 × 44px tap targets.
2. CMS stress tests: the longest title, an empty optional field and a missing image in each collection.
3. Sharing and identity: 1200 × 630 social images, favicon, touch icon and a designed 404 page.
4. EU legal checks: privacy and imprint pages, cookie consent and analytics waiting for consent.
5. Function: links, forms, image dimensions, lazy loading, reduced-motion fallbacks and migration redirects.

Only items explicitly marked (fix) may be changed. Findings include the page and element, then go into three report groups:

• Fixed
• Needs a decision from me
• Check manually, including form email delivery

The search-engine and answer-engine optimization skill follows Framer's recommendations, with four basics named in the thread:

• One H1 per page.
• A title and description for every page.
• Image alt text.
• FAQ schema.

0xCharlota says the same changes brought her own site to 100/100 on Framer's AEO scanner. The scanner's disclosure says it assesses one URL using AI, with scores based on Framer's own methodology.

The handoff skill is customized to the client's recurring content, such as team members, products or events.

Its proposed workflow is:

1. Ask for content one question at a time.
2. Fill the relevant CMS fields.
3. Save a draft.
4. Flag content that needs shortening, additions or removal to fit the template.

Fast page or section creation was the benefit 0xCharlota highlighted in a reply. She also asked others what they were automating.

Startup founders increasingly ask her for reusable AI-native deliverables, 0xCharlota wrote in a separate post:

• Brand guidelines as Claude skills.
• Generative workflows in Flora.
• Custom image models trained on the brand.
• Small vibe-coded brand tools their teams can keep using after handoff.

She says she uses AI for exploration, polish and QA, but never sends raw AI output to a client. Her follow-up paired that view with an illustration she credited to Hiller Goodspeed.