Copy the published post text
Web Design
copy ready · render pending
Output-policy spec format · dimensions (asset_specs.output_policy)
formatnative cut · 9:16 · 1:1 · 16:9
dims1080×1920 · 1080×1080 · 1920×1080
cadence5/day floor × 9 channels
Channels 9 destinations
TikTokInstagramLinkedInX/TwitterFacebookThreadsPinterestBlueskyYouTube
This post a distinct social asset — its own angle, storyboard, and cuts
social-W29-Wed-2
5-distinct-social/day · 9:16 master → 1:1 / 16:9 cuts per channel
Channel-cuts this asset → 9 native captions (one master · per-platform aspect+copy)
| Channel | Native caption |
|---|---|
| Tiktok | A website mockup always lies (AI-assisted method). Real text reflows; real buttons grow. So design IN the browser with tokens: named values for every color, size, and space. Change ONE token and the whole site updates. Build mobile-first, then let it breathe. Ship a system, not a screenshot. #webdesign #css #designsystems |
| The mockup always lies. Design in the browser with tokens. Change one token, the whole site moves. Mobile first, then let it breathe. Ship a system, not a screenshot. #webdesign #designsystems #css #frontend #ux | |
| Web design that survives launch day. A site used to start as a flat picture a developer copied pixel by pixel, and the picture always lied because real text reflows and buttons grow. We design in the browser with tokens: named values for every color, size, and space. Change one token, like your main color, and every button and badge updates across the site. Build mobile-first, then let it breathe on wider screens. Test with real text on a real phone and launch day has no ugly surprises. We ship a system, not a screenshot. | |
| X | A website mockup always lies, because real text reflows and buttons grow. Design IN the browser with tokens (named values for color, size, space). Change one token, the whole site updates. Ship a system, not a screenshot. |
| A website used to begin as a flat picture a developer copied pixel by pixel, and the picture always lied because real text reflows and buttons grow. We design in the browser with tokens: named values for every color, size, and space. Change one token and the whole site updates. Build mobile-first, then let it breathe. Ship a system, not a screenshot. See the method in the video. | |
| Threads | A website mockup always lies, because real text reflows and buttons grow. Design IN the browser with tokens (named values for color, size, space). Change one token, the whole site updates. Mobile first, then let it breathe. |
| Web design with design tokens: design in the browser, mobile-first layout, responsive design system, named color values, CSS variables, scalable web design, no mockup lies. How to ship a system that bends without breaking instead of a static screenshot. | |
| Bluesky | A website mockup always lies, because real text reflows and buttons grow. Design IN the browser with tokens (named values for color, size, space). Change one token, the whole site updates. |
| Youtube | Web Design with Tokens: Change One Value, Move the Whole Site A website used to start as a flat picture a developer copied pixel by pixel, and the picture always lied because real text reflows and buttons grow. We design in the browser with tokens: named values for every color, size, and space. Change one token, like your main color, and every button and badge updates across the site. Build mobile-first, then let it breathe on wider screens. Test with real text on a real phone and launch day holds no surprises. We ship a system, not a screenshot. AI-assisted, human-judged. |
Composition layer × scene 9 scenes · this post's OWN storyboard (distinct per asset)
| # | Layer (comp_id · still · tier) | Beat | Timecode | Motion | Logo | Audio | VO / on-screen / caption |
|---|---|---|---|---|---|---|---|
| 1 | matches intent shared field signature-3d | open | 0–7.3s | spatial-parallax | icon·wireframe | ♪ bed_in | A website used to begin as a flat picture that a developer then tried to copy, pixel by pixel. on-screen: Sites used to start as a picture |
expected on screen: white ground · box hero in the shared Signal Field · Faber leads · node-graph · spatial-parallax · icon·wireframe logo · caption bottom-left spec (the prompt): comp_id shared Signal Fieldvisual node-graphshape boxground whitetreatment wireframemotion spatial-parallaxpower summoninstrument summon→Sites used to start as a picture | |||||||
| 2 |  matches intent shared field signature-3d | hook | 7.3–13.899999999999999s | kinetic-build | icon·color | ♪ node_lock | The picture always lied, because real text reflows and real buttons grow when the words get longer. on-screen: The picture always lied about real text |
expected on screen: white ground · box hero in the shared Signal Field · Faber leads · mark · kinetic-build · icon·color logo · caption bottom-left spec (the prompt): comp_id shared Signal Fieldvisual markshape boxground whitetreatment colormotion kinetic-buildpower laser-lockinstrument laser-trace→The picture always lied about real text | |||||||
| 3 |  matches intent NumberedList template | teach | 13.9–20.5s | kinetic-build | icon·color | ♪ node_lock | We design in the browser instead, with named values for every color, size, and space, called tokens. on-screen: Design in the browser with tokens |
expected on screen: white ground · a NumberedList panel over a dimmed Signal Field · Faber leads · node-graph · kinetic-build · icon·color logo · caption bottom-left spec (the prompt): comp_id NumberedListvisual node-graphshape boxground whitetreatment colormotion kinetic-buildpower morphinstrument morph+laser→Design in the browser with tokenscurate items, nodes | |||||||
| 4 |  matches intent RankList template | proof | 20.5–27.8s | receipts-count | icon·color | ♪ node_lock | Change the token for your main color once and every button, link, and badge updates across the whole site. on-screen: Change one token, the whole site moves |
expected on screen: white ground · a RankList panel over a dimmed Signal Field · Faber leads · receipts · receipts-count · icon·color logo · caption bottom-left spec (the prompt): comp_id RankListvisual receiptsshape boxground whitetreatment colormotion receipts-countpower receiptsinstrument spotlight→Change one token, the whole site movescurate rows, statsLabels | |||||||
| 5 |  matches intent LogStream template | diff | 27.8–34.8s | crossfade-8f | icon·color | ♪ node_lock | The Big T-M does not hand over a screenshot. We hand over a system that bends without breaking. on-screen: We ship a system, not a screenshot |
expected on screen: white ground · a LogStream panel over a dimmed Signal Field · Faber leads · code · crossfade-8f · icon·color logo · caption bottom-left spec (the prompt): comp_id LogStreamvisual codeshape boxground whitetreatment colormotion crossfade-8fpower morphinstrument morph→We ship a system, not a screenshotcurate codeLines, rows | |||||||
| 6 |  matches intent ChecklistCard template | teach | 34.8–42.099999999999994s | kinetic-build | icon·color | ♪ node_lock | Build the small phone layout first, where space is tight, then let it breathe as the screen gets wider. on-screen: Build mobile first, then add room |
expected on screen: white ground · a ChecklistCard panel over a dimmed Signal Field · Faber leads · node-graph · kinetic-build · icon·color logo · caption bottom-left spec (the prompt): comp_id ChecklistCardvisual node-graphshape boxground whitetreatment colormotion kinetic-buildpower morphinstrument morph+laser→Build mobile first, then add roomcurate items, nodes | |||||||
| 7 |  matches intent StatScoreboard template | proof | 42.1–49.800000000000004s | receipts-count | icon·color | ♪ node_lock | Because you tested with real text on a real phone, launch day has no ugly surprises waiting in the corners. on-screen: Real text, real devices, no surprises |
expected on screen: white ground · a StatScoreboard panel over a dimmed Signal Field · Faber leads · receipts · receipts-count · icon·color logo · caption bottom-left spec (the prompt): comp_id StatScoreboardvisual receiptsshape boxground whitetreatment colormotion receipts-countpower receiptsinstrument spotlight→Real text, real devices, no surprisescurate pillar, stats, statsLabels | |||||||
| 8 |  matches intent ProcessFlow template | step | 49.8–57.099999999999994s | kinetic-build | icon·color | ♪ node_lock | Try it: give your colors and spacing names, use only those names, and watch edits stop being a chore. on-screen: Do this: name your values as tokens |
expected on screen: white ground · a ProcessFlow panel over a dimmed Signal Field · Faber leads · pipeline · kinetic-build · icon·color logo · caption bottom-left spec (the prompt): comp_id ProcessFlowvisual pipelineshape boxground whitetreatment colormotion kinetic-buildpower throwinstrument laser-trace→Do this: name your values as tokenscurate stages, steps | |||||||
| 9 |  matches intent shared field signature-3d | resolve | 57.1–65.2s | coalescence | icon·wireframe | ♪ bed_out | The web was never a poster. It is alive, and the best sites are designed to live, not to sit still. on-screen: The web is alive |
expected on screen: white ground · box hero in the shared Signal Field · Faber leads · coalescence · coalescence · icon·wireframe logo · caption bottom-left spec (the prompt): comp_id shared Signal Fieldvisual coalescenceshape boxground whitetreatment wireframemotion coalescencepower coalescenceinstrument coalescence→The web is alive; design it that way | |||||||