Landing Visual Recipe

SkillMedia

Guides your agent to build editable landing pages with visual references, planning, critique, and repair stages.

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the Landing Visual Recipe skill

About this skill

The open-source design agent and harness, better than Claude Design on academic communication artifacts production. This DesignHarness can also be used with any coding harness you like ( Codex/Claude Code/Kimi Code/Pi/OpenCode etc..) and any agentic model you want.

What this skill tells your AI

The instructions your AI receives, as published by yaxin9luo/autodesign in skills/landing/visual_recipe/SKILL.md and read by ahel’s review.

Use for semantic, editable landing pages. Visual references guide the next native revision, never replace it.

Stage: enhance

Classify product, SaaS, research, or paper-project intent and name the primary visual evidence, first-viewport job, proof type, and action intent. A paper-project page must expose the research identity, method, evidence, reproducibility resources, and citation path. Default paper-project pages to a light academic editorial surface with one primary accent; apply the staged current color system when one is required.

Stage: plan

Plan the real first viewport and section arc before blocks. Paper-project pages are evidence-first and use discovered resources. Read section_map and layout_treatments. Read paper_project_page_taste_v1 whenever the subtype is a paper project page; it is the versioned taste and rejection contract derived from user labels, so do not imitate or retrieve the reference sites. Select at least one meaningful source-grounded interaction from available figures or result tables, and define its desktop keyboard and reduced-motion behavior. Use 3-8 restrained inline SVG icons for functional cues, with accessible names on icon-only controls. Keep core content visible without JavaScript; motion is enhancement-only and requires a prefers-reduced-motion: reduce fallback. Leave 3D off unless the source evidence or brief explicitly requires it.

Stage: critique

Reject weak folds, repetitive cards, missing proof, generic marketing CTA flows, excess accent colors, decorative icon fields, inaccessible icon-only controls, and paper pages missing available resource links, method visuals, benchmark/demo evidence, limitations when supported, citation metadata, or meaningful source-grounded interaction. Reject motion without reduced-motion handling and any JavaScript reveal pattern that initially hides core content. Apply the same taste contract during critique; the landing critic carries its enforceable paper-page rubric directly. A visual reference must guide a new native editable revision, never become a rasterized page substitute.

Stage: repair

Repair sections and groups before child polish; preserve source ids, links, tables, native text, interaction semantics, and reduced-motion access. Read layout_treatments and re-read paper_project_page_taste_v1 when the page has drifted toward a static template, card wall, or product-marketing shell.

Signals

GitHub stars
229
Forks
10
Last commit
Sep 2026
Advanced
Item type
skill
Key
visual-recipe
Source
github.com/yaxin9luo/autodesign