wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
3.7 KiB
3.7 KiB
name, zh_name, en_name, emoji, description, category, scenario, aspect_hint, featured, tags, example_id, example_name, example_format, example_tagline, example_desc, od
| name | zh_name | en_name | emoji | description | category | scenario | aspect_hint | featured | tags | example_id | example_name | example_format | example_tagline | example_desc | od | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| codex-interactive-capability-map | Codex 交互式能力地图 | Codex Interactive Capability Map | 🗺️ | Turn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel. | prototype | knowledge | desktop web prototype, responsive down to tablet | 42 |
|
sample-codex-interactive-capability-map | Codex Interactive Capability Map · Operating Model | html | Long text → clickable operating model | A long post transformed into a concise visual map with linked concepts, use cases, and detail cards. |
|
Codex Interactive Capability Map
Transform a long article, social thread, memo, product essay, or launch narrative into a visual explainer that people can scan and click through.
Use When
- The input is mostly text and the user wants a clearer mental model.
- The content contains repeated concepts, a process, a framework, capabilities, or operating principles.
- The desired output is a polished web artifact, not a static summary.
Workflow
- Read the source material and extract 6-10 core concepts.
- Name the overall model in plain language. Prefer a short noun phrase such as "Operating Model", "Capability Map", or "Workflow Loop".
- Build three linked views:
- A hero that frames the source and the promise.
- A workflow loop that shows the main sequence or system.
- A use-case matrix that combines concepts into practical scenarios.
- Add a right-side detail panel. Clicking any nav item, loop node, matrix card, or maturity level must update the panel.
- Make the clicked element and the detail panel visibly correspond through shared color, motion, icon/mark shape, or gradient.
- Keep copy short. The artifact should reduce reading effort, not recreate the article.
Visual Direction
- Use a Codex-inspired refined product style with soft liquid motion, glassy surfaces, and crisp functional controls.
- Make the first viewport feel like a finished product surface, not a wireframe.
- Favor diagrams, loops, matrices, rails, cards, and progressive disclosure over paragraphs.
- Use meaningful hover and active states. A click should feel consequential.
- Avoid external image dependencies unless the user explicitly provides assets.
Interaction Requirements
- All clickable elements must update content or scroll to a meaningful section.
- The active state must be visually obvious.
- The detail panel should animate on each change.
- Long labels must wrap cleanly and never be clipped.
- The layout must work at 1280px wide and collapse cleanly below 900px.
Output Contract
Emit one single-file HTML artifact:
<artifact identifier="codex-interactive-capability-map" type="text/html" title="Codex Interactive Capability Map">
<!doctype html>
<html>...</html>
</artifact>
Include all CSS and JavaScript inline. Do not use lorem ipsum. Do not leave placeholder cards. If the source does not include enough concrete details, infer a small, clearly labeled conceptual model from the source instead of inventing unrelated content.