diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a4baca..2000a9b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,17 @@ Each skill maintains its own independent version. Use this matrix to understand ## Released Versions +## [1.4.0] - 2026-09-14 + +### website +- Added a **More from ReScience Lab** section to the opc.dev homepage, above the skills grid, featuring the [super-prototyping](https://github.com/ReScienceLab/super-prototyping) plugin: banner, description, keyword tags, and links to the repo and prototyping.rescience.com +- Added `super-prototyping` to the footer links +- Added blog post: *Clone Any App Screen — and Prove It: Introducing super-prototyping*, covering the clone-prototype phases, the canvas, the fourteen worked examples, and the per-agent install +- **Fix**: skill cards rendered 907px wide inside their 852px grid container, so every card sat wider than the header and hero and the page scrolled horizontally. The skills grid had a single implicit `auto` column, which sizes to max-content; pinned to `minmax(0, 1fr)` +- **Fix**: blog post dates are formatted in UTC. `new Date("YYYY-MM-DD")` parses as UTC midnight, so a negative-offset zone rendered the previous day and a post's card and byline could disagree + +No skill versions changed in this release. + ## [1.3.0] - 2026-04-20 ### requesthunt diff --git a/website/blog/2026-09-14-super-prototyping-canvas.png b/website/blog/2026-09-14-super-prototyping-canvas.png new file mode 100644 index 0000000..9b08462 Binary files /dev/null and b/website/blog/2026-09-14-super-prototyping-canvas.png differ diff --git a/website/blog/blog.json b/website/blog/blog.json index eeadae2..57fa05c 100644 --- a/website/blog/blog.json +++ b/website/blog/blog.json @@ -1,5 +1,110 @@ { "posts": [ + { + "slug": "super-prototyping-measured-ui-clones", + "title": "Clone Any App Screen — and Prove It: Introducing super-prototyping", + "description": "super-prototyping rebuilds product UI as self-contained HTML artboards on a local tldraw canvas. Hand your agent screenshots and every colour and metric in the replica traces back to a measurement of the capture, verified by re-rendering and diffing. Three skills, a measuring toolkit, fourteen worked examples. Apache-2.0.", + "date": "2026-09-14", + "dateModified": "2026-09-14", + "author": "OPC Team", + "category": "Product Launch", + "tags": [ + "super-prototyping", + "design", + "prototyping", + "tldraw", + "ui-clone", + "design-tokens", + "claude-code-plugin" + ], + "readTime": "8 min", + "keywords": [ + "super-prototyping", + "clone app UI from screenshot", + "screenshot to HTML", + "AI UI prototyping", + "tldraw canvas", + "design tokens from screenshots", + "Claude Code design plugin", + "HTML artboards", + "UI mockup AI agent", + "measured design system", + "iOS screen clone", + "agent plugin design", + "Codex plugin design", + "prototyping without Figma", + "AI design workflow" + ], + "image": "https://raw.githubusercontent.com/ReScienceLab/super-prototyping/main/assets/og-image.png", + "schema": { + "@context": "https://schema.org", + "@type": "BlogPosting", + "headline": "Clone Any App Screen — and Prove It: Introducing super-prototyping", + "description": "An agent plugin that rebuilds product UI as self-contained HTML artboards on a local tldraw canvas, where every colour and metric traces back to a measurement of the source capture.", + "author": { + "@type": "Organization", + "name": "OPC Team", + "url": "https://opc.dev" + }, + "datePublished": "2026-09-14", + "dateModified": "2026-09-14", + "publisher": { + "@type": "Organization", + "name": "OPC Skills", + "url": "https://opc.dev", + "logo": { + "@type": "ImageObject", + "url": "https://opc.dev/opc-logo.svg" + } + }, + "image": "https://raw.githubusercontent.com/ReScienceLab/super-prototyping/main/assets/og-image.png", + "mainEntityOfPage": "https://opc.dev/blog/super-prototyping-measured-ui-clones" + }, + "faq": [ + { + "question": "Do I need Figma or any design tool to use super-prototyping?", + "answer": "No. Boards are plain .html files the canvas reads straight from a directory in your project. No registry, no build step, no design tool. They live in your repo and diff in git like any other source file." + }, + { + "question": "How is this different from screenshot-to-code?", + "answer": "Screenshot-to-code infers values from a glance at the image. clone-prototype measures them: it grids the capture, runs a colour census over each named region, records the evidence per token, then re-renders the generated boards and diffs them against the capture until the numbers agree." + }, + { + "question": "Does super-prototyping only handle iOS screens?", + "answer": "The iPhone frame is a built-in spec at 393 x 852 pt, but a board is arbitrary self-contained HTML inside a 478 x 980 shape box. Web and desktop screens are built the same way." + }, + { + "question": "Can I design screens that have no reference to copy?", + "answer": "Yes, that is the new-ui-mock skill. It designs new screens on the same measured token block, including the empty, loading and error states, and side-by-side proposals." + }, + { + "question": "Which AI agents can install it?", + "answer": "Claude Code, Codex, WorkBuddy/CodeBuddy, Hermes and Pi each have a one-line marketplace install. Anything else that reads SKILL.md installs with npx skills add ReScienceLab/super-prototyping. The measuring toolkit is one uv tool install per machine." + } + ], + "citations": [ + { + "text": "super-prototyping - GitHub Source", + "url": "https://github.com/ReScienceLab/super-prototyping" + }, + { + "text": "super-prototyping Homepage", + "url": "https://prototyping.rescience.com" + }, + { + "text": "tldraw", + "url": "https://tldraw.dev" + }, + { + "text": "Agent Plugins v1 Specification", + "url": "https://agent-plugins.org/specification" + }, + { + "text": "Agent Skills Standard", + "url": "https://agentskills.io" + } + ] + }, { "slug": "archive-skill-session-knowledge", "title": "Stop Losing Context Between AI Sessions: Introducing the Archive Skill", diff --git a/website/blog/posts/super-prototyping-measured-ui-clones.md b/website/blog/posts/super-prototyping-measured-ui-clones.md new file mode 100644 index 0000000..9bc7d0d --- /dev/null +++ b/website/blog/posts/super-prototyping-measured-ui-clones.md @@ -0,0 +1,229 @@ +# Clone Any App Screen — and Prove It: Introducing super-prototyping + +*By OPC Team | September 14, 2026 | 8 min read* + +**TL;DR** — We shipped [**super-prototyping**](https://github.com/ReScienceLab/super-prototyping), an agent plugin that rebuilds product UI as self-contained HTML artboards on a local [tldraw](https://tldraw.dev) canvas. Hand your agent screenshots, ask for the `clone-prototype` skill, and it grids the capture, samples it region by region, writes one measured token block, generates every board from a single `gen.py`, then re-renders and diffs those boards against the capture until the numbers hold. Every colour and every metric traces back to a measurement. It is Apache-2.0, works in Claude Code, Codex, CodeBuddy, Hermes, Pi and anything that reads `SKILL.md`, and it is now featured on [opc.dev](https://opc.dev). + +--- + +## The Problem: "Looks About Right" Is Not a Replica + +Ask any AI agent to rebuild a screen from a screenshot and you get something that is *approximately* the app. The blue is a blue. The row height is a row height. The font is "a clean sans-serif." + +Individually each value is off by two or three points. Together they read as a knock-off, and nobody can tell you **which** value is wrong, because no value was ever measured. It was inferred from a thumbnail the model glanced at. + +That is the failure mode super-prototyping is built against. The rule the whole plugin is organised around: + +> **Every colour and every metric in a cloned artboard traces to a measurement.** + +Grid the reference image. Look at it. Name the element. *Then* write the token. No evidence, no token. + +--- + +## What is super-prototyping? + +It is an **agent plugin**: three skills, a measuring toolkit, and a local canvas app that shows the boards. + +| Skill | Use it for | +|---|---| +| **clone-prototype** | Copying a real app's screens from captures, by measurement | +| **new-ui-mock** | Designing new screens with no reference, built on existing tokens — including the empty, loading and error states | +| **prototype-canvas** | Running and operating the canvas: boards, `layout.json`, deep links, annotated-screenshot review | + +The output is plain files. Each board is one `.html` file in `mockups/canvases//`, fully self-contained — no external CSS, JS, fonts or images, `data:` URIs and inline SVG only, because boards render inside `