An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (①②③④⑤) in a single accent color, paired with a right-hand SPEC PANEL that lists each numbered pin with a short engineering / UX note. This is the "wireframe + redline spec" style — clean, flat, low-fidelity, NOT hand-drawn. Use when the brief asks for "annotated wireframe", "redline wireframe", "wireframe with spec", "lo-fi landing wireframe", "low fidelity", "线框图", "标注线框", or "redline".
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Produce a single flat, low-fidelity landing-page wireframe with a redline spec. The whole point is "structure + handoff notes, not pixels" — greyboxes carry the layout, numbered pins call out regions, and a right-hand spec panel turns each pin into a short engineering / UX note. Keep it clean and flat; never hand-drawn or scribbly.
Skip finished UI. This skill explicitly wants a low-fidelity greybox look. Honor type tokens only loosely (one clean sans like Inter / system-ui for labels, one mono like IBM Plex Mono for the spec notes and pin numbers). Use medium-grey fills with defined darker borders so the page reads as a thumbnail — avoid near-white-on-white, which renders blank.
Set the two-column shell. LEFT is the wireframe canvas: a browser-chrome framed greybox page. RIGHT is a narrow "ANNOTATIONS / SPEC" panel. Pick ONE accent color (coral or blue) and use it ONLY for the numbered pins and the matching spec numbers — everything else stays greyscale.
Lay out the canvas, top to bottom, each block a greybox with a numbered pin absolutely positioned on it:
Mirror every pin in the spec panel. Each spec row = the circled number in
the accent color + a short mono/sans note, e.g. "① Sticky nav, 64px, condenses
on scroll", "② Hero H1 48/56, CTA pair primary+ghost", "③ 5 partner logos,
greyscale", "④ 3-up at ≥960px → 1-up mobile", "⑤ 4-col footer, legal row".
Mark the panel and each row with data-od-id.
Self-check:
Emit between <artifact> tags:
<artifact identifier="wireframe-slug" type="text/html" title="Annotated Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.
日本語の概要は準備中です。原文の説明を表示しています。
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
日本語の概要は準備中です。原文の説明を表示しています。
Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions.
日本語の概要は準備中です。原文の説明を表示しています。
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, reading selected OpenDesign browser-tab context, testing web apps, dogfooding OpenDesign previews, QA, bug hunts, or reviewing app quality. Prefer local OpenDesign preview URLs unless the user explicitly asks for external browsing.
日本語の概要は準備中です。原文の説明を表示しています。
Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album experiments and brand soundtracks.
日本語の概要は準備中です。原文の説明を表示しています。
Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.
日本語の概要は準備中です。原文の説明を表示しています。