20:"$Sreact.view_transition" 21:I[9754,["/_next/static/chunks/2t36f5p4pjzlb.js","/_next/static/chunks/1gyqeidjm5eoa.js","/_next/static/chunks/0_fjnxc4tt_l_.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/3kv2zf0i7s2wc.js","/_next/static/chunks/1vs_3g_g75zmk.js","/_next/static/chunks/2g4dh802s8oz3.js","/_next/static/chunks/1bc3f0shukf1j.js","/_next/static/chunks/192kgs9v_t14j.js","/_next/static/chunks/0z6pw0v5c_lx5.js","/_next/static/chunks/08r60e6icmtkc.js","/_next/static/chunks/3trx6c0i7_x-3.js","/_next/static/chunks/40sro5bzp9bi_.js","/_next/static/chunks/1wgf3tk38y6cf.js"],"ProjectDetail"] 22:T4640, claude-directory · 信号轨迹

CLAUDE-DIRECTORY · 信号轨迹

github / pulkitxm · MIT

一行提示词，一块可复用构件。

claude-directory 是一个开源画廊：用 Claude（Fable 5）生成的 Web UI 实验。从 Hero 区块、落地页、GLSL 着色器到设计系统与 3D 场景——每个项目都是一条自包含的流水线，自带生成提示词与演示，可以直接接入你的 AI 开发流程。

打开 GitHub 项目主页 pulkit.page/claude-directory

输入 · prompt.md + 项目描述蒸馏 · Claude Fable 5 生成输出 · 自包含、可复用的 UI 构件

TRACE · 类别节点带

信号沿一条主线展开，途经九类实验节点

这些类别都来自仓库的自述与话题标签，不虚构数量——它们是流水线上每一站可取的构件样本。

CATEGORY-NODES

Hero 区块落地页着色器 UI 设计系统组件作品集动画与加载器 3D 与游戏模板

EVIDENCE · readme 叙述

每个项目都自动携带它的源头：提示词与演示

读到 readme 时我们看到——每个项目自包含，附带生成时用的提示词（prompt.md）和录制的演示（demo.mp4）。这意味着当你接入一个构件时，理由与过程也在旁边。

01 IN

生成提示词随项目同行

每条记录都带着当时的 prompt.md，方便你理解一个界面为何被这样建造，再改造它。
prompt.md
02 DEMO

录制的演示保留运行结果

每个实验附有 demo.mp4，让你在写代码之前先看到它实际动起来的样子。
demo.mp4
03 OUT

可直接注入 AI 工作流

仓库面向「接进你的 AI 代理、更快交付」，把别人跑通的界面变成你的起点。
reusable

STACK-RAIL

沿着同一条轨道：技术栈

这是仓库实际使用的技术清单——话题标签与语言记录可以逐条对上，不超出证据。

frameworkReact

stylingTailwind CSS

3DThree.js / WebGL

shadersGLSL

motionFramer Motion

animationGSAP

buildVite

runtimeTypeScript / HTML / CSS / JS

primary_language · HTML | license · MIT

CAUTION · 接入前审查

这些界面来自 AI，使用前请先自己走一遍

README 自己就警告：所有项目都由 Claude Fable 5 生成，属于 vibe coding 产物。接进生产前，以下几条值得你亲自确认。

01 · CODE

审查每段代码的逻辑与边界，不把别人的输出当成品直接上生产。

02 · DEPS

检查依赖清单，确认它们来自何处、是否你愿意引入运行时。

03 · ACCESS

验证可访问性与响应式表现，在真实设备与屏幕上过一遍。

04 · LOCAL

上线前在本地跑一次检查，而不是让错误在线上第一次露面。

license MIT · owner pulkitxm

language HTML · 自包含项目含 prompt + 演示

到 GitHub 核验证据

23:T45c8, claude-directory · signal trace

CLAUDE-DIRECTORY · A SIGNAL TRACE

github / pulkitxm · MIT

One prompt line in,
one reusable block out.

claude-directory is an open-source gallery of web UI experiments generated with Claude (Fable 5). From hero sections and landing pages to GLSL shaders and 3D scenes, every project is a self-contained pipeline—it ships its own prompt and a recorded demo, ready to plug into your AI-assisted build.

Open on GitHub View site · pulkit.page/claude-directory

input · prompt.md + project description distilled · generated with Claude Fable 5 output · self-contained, reusable UI block

TRACE · CATEGORY NODE BAND

The signal runs in one line past nine kinds of experiment

These categories come straight from the repository's own description and topic tags—no invented counts, just the stops you can pull a sample from.

CATEGORY-NODES

Hero sections Landing pages Shaders UI design systems Components Portfolios Animations & loaders 3D & games Templates

EVIDENCE · README NARRATIVE

Every project carries its own source: the prompt and a demo

Reading the README, we saw that each project is self-contained, ships its originating prompt (prompt.md), and includes a recorded demo (demo.mp4). When you pull a block in, the reasoning behind it ships with it.

01 IN

The generative prompt rides along

Each entry keeps its original prompt.md, so you can see why an interface was built this way before you reshape it.
prompt.md
02 DEMO

A recorded demo keeps the result running

Every experiment ships a demo.mp4, so you see how it actually behaves before you write a line of code on top of it.
demo.mp4
03 OUT

Ready to feed back into an AI workflow

The repository points each block at your AI agent—plug verified interfaces into your build and ship faster.
reusable

STACK-RAIL

One shared track: the stack it actually ships on

Every entry on this rail is backed by the repository's topic tags and language record—no claims beyond the evidence.

frameworkReact

stylingTailwind CSS

3DThree.js / WebGL

shadersGLSL

motionFramer Motion

animationGSAP

buildVite

runtimeTypeScript / HTML / CSS / JS

primary_language · HTML | license · MIT

CAUTION · REVIEW BEFORE PRODUCTION

These interfaces come from AI—walk them yourself first

The README warns outright: every project was generated by Claude Fable 5 and is one of those vibe-coded outputs. Before it reaches production, check these things yourself.

01 · CODE

Review the logic and edges of each block—don't take another model's output as a finished artifact.

02 · DEPS

Check the dependency list, confirm where it comes from and whether you want it in your runtime.

03 · ACCESS

Verify accessibility and responsiveness across the real devices and screens you actually target.

04 · LOCAL

Run local checks before launch, instead of letting a mistake surface in production for the first time.

license MIT · owner pulkitxm

language HTML · self-contained projects with prompt + demo

Verify on GitHub

a:[["$","$20",null,{"enter":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-enter","default":"none"},"exit":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-exit","default":"none"},"update":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-update","default":"none"},"default":"none","children":["$","$L21","cmsrckyrc016zzn198rmjm883:zh-CN:beautified",{"project":{"id":"cmsrckyrc016zzn198rmjm883","slug":"pulkitxm-claude-directory","name":"claude-directory","description":"开源 AI 生成前端组件与模板合集","authorName":"pulkitxm","authorVerification":{"verified":false,"verifiedAt":null},"category":"development_tools","subcategory":"data_ai_tools","experienceUrl":"https://pulkit.page/claude-directory","qualityScore":95,"featured":false,"officialSite":null,"views":{"original":{"available":true},"official":{"available":false,"reason":"disabled_by_policy"},"beautified":{"available":true,"reason":null},"defaultView":"beautified"},"beautifiedView":{"revisionId":"cmt2zh2i201ed6271erd4353c","kind":"artifact","artifact":{"schemaVersion":"localized-static-html-v4","kind":"static_html","locales":["zh-CN","en"],"defaultLocale":"zh-CN","documents":{"zh-CN":"$22","en":"$23"},"designDirections":{"schemaVersion":"dodot-design-directions-v1","directions":[{"id":"prompt-to-artifact","name":"Prompt-to-Artifact Signal Chain","projectMetaphor":"每个仓库项目都是一条从一行提示词信号出发、被 Claude 蒸馏成可落地构件的流水线：prompt 输入，成品输出。","signatureVisual":"一条横向的信号轨迹，左端是一小行提示词文字（prompt.md），沿着走线依次节点化，右端落成一个可复用的构件节点。","heroGeometry":"一条贯穿首屏的横向信号走线，左起细线标有 prompt 条目，逐点收敛到右侧一个缩略构件方块。","sectionSequence":["signal-line-hero","categories-mapped-nodes","each-project-carries-prompt-and-demo","stack-rail","warnings-and-review","license-closing"],"surfaceModel":"线路板式的分层台面：浅灰信号底、描边的独立板卡节点、一条贯穿的接线轨道。","palette":"pale paper #f5f2ec, signal ink #1f2530, trace line #c84a3a, node accent #2f6f5f, silent rail #b8b4a9","typography":"工程排版的等宽主视觉，以真实 prompt 片段作为大标题文字层，衬托窄副标。","desktopComposition":"单一横向信号流将左侧提示词与右侧构件相连，下文以节点带组织类别与事实。","mobileTransformation":"信号走线弯曲为纵向下行轨迹，提示词在上、构件在下，逐点下读。","mediaStrategy":"无合格本地媒体，移除媒体区，用派生信号轨迹作为标志视觉。","forbiddenPatterns":["三卡指标墙","浏览器/编辑器/终端壳","发光网格或粒子","伪造产品截图"],"compositionFingerprint":"hero横向信号走线 + 提示词节点 + 轨迹收敛构件 + 等宽工程排版"},{"id":"experiment-drawer","name":"Open Experiment Drawer Grid","projectMetaphor":"仓库是一排可抽取的实验抽屉，每格是一个已完成的 AI UI 实验，拉开即见其生成提示词与演示。","signatureVisual":"一列层叠可抽出的抽屉，每层抽出一格即露出一张夹着 prompt 纸条的实验卡。","heroGeometry":"叠放的三层抽屉，前层抽出约一半，露出内部夹着的提示词纸条与演示标记。","sectionSequence":["drawer-hero","category-tabs-of-drawers","prompt-demo-pair-per-project","stack-and-runtime","review-before-production","closing"],"surfaceModel":"木质收纳箱体：暖色抽屉面板、内衬纸卡、细金属标签。","palette":"walnut #4a3227, cream liner #fff7ec, label brass #b0823c, prompt ink #2a211c, dark slate #23272f","typography":"工业标签式粗体标题配窄距标签，抽出动作以 hover 呈现。","desktopComposition":"成排抽屉为主体，悬停逐层抽出，正文与提示词并置展示。","mobileTransformation":"抽屉改为单列纵叠，逐层抽开作为章节过渡，先文案后视觉。","mediaStrategy":"无合格本地媒体，移除媒体区，用抽屉开合动作作为标志视觉。","forbiddenPatterns":["假 IDE 外壳","营销 Hero + 三卡指标","持续后台动画","伪造截图"],"compositionFingerprint":"层叠抽屉 + 抽拉出提示词纸条 + 悬停单层开合 + 工业标签排版"},{"id":"archive-reel","name":"Curated Experiment Archive Reel","projectMetaphor":"仓库如同一卷按类别归档的胶卷，每一段画面是一个被 Claude 生成的 UI 实验，卷动时逐帧显影。","signatureVisual":"一条纵向档案胶卷带，帧格内是一个缩略构件的显影剪影，每格标注类别与媒介。","heroGeometry":"三段纵向胶卷帧列，中段帧格高亮显示一个显影构件的轮廓与边缘标注。","sectionSequence":["reel-hero","category-reel-column","frame-provides-prompt-and-demo","stack-traces-on-frames","production-caution","license-ending"],"surfaceModel":"暗房显影屏：深底灰、浅显影剪影帧、穿孔胶片边沿。","palette":"dark ink #101216, silver film #c8ccd4, developer green #57c08a, frame line #6b7280, exposure slate #31363d","typography":"档案编号式等宽标记配大字显影标题，段落配窄排版。","desktopComposition":"纵向胶卷为主，中帧高亮作焦点，事实沿帧缘排布。","mobileTransformation":"胶卷转单列纵滚，每帧自上而下显影展开为章节。","mediaStrategy":"无合格本地媒体，移除媒体区，用显影帧轮廓作为标志视觉。","forbiddenPatterns":["粒子背景","三卡 SaaS","浏览/终端壳","伪造产物截图"],"compositionFingerprint":"纵向胶卷帧列 + 中帧显影高亮 + 档案编号等宽排版 + 帧缘事实轨迹"}],"selectedDirectionId":"prompt-to-artifact","selectionRationale":"该方向的信号轨迹最直接刻画仓库的机制：每个项目是一条 self-contained（自带 prompt.md 与 demo.mp4）的生成流水线，提示词输入收敛为可复用构件，与 readme 中'任务自带提示词与演示'的证据结构一致。它同时天然规避了其他方向对'容器/壳'与'成排同形物体'的更接近风险，构图上以单一线索贯穿事实，最贴合证据驱动的标志视觉，且在本批次 antiTemplateContext 为空、无冲突的前提下给出了真正差异化的横向构图。"},"designBrief":{"schemaVersion":"dodot-design-brief-v1","selectedDirectionId":"prompt-to-artifact","projectMetaphor":"每个仓库项目都是一条从一行提示词信号出发、被 Claude 蒸馏成可落地构件的流水线：prompt 输入，成品输出。","signatureVisual":"一条横向的信号轨迹，左端是一小行提示词文字（prompt.md），沿着走线依次节点化，右端落成一个可复用的构件节点。","compositionFingerprint":"hero横向信号走线 + 提示词节点 + 轨迹收敛构件 + 等宽工程排版","heroGeometry":"一条贯穿首屏的横向信号走线，左起细线标有 prompt 条目，逐点收敛到右侧一个缩略构件方块。","sectionSequence":["signal-line-hero","categories-mapped-nodes","each-project-carries-prompt-and-demo","stack-rail","warnings-and-review","license-closing"],"surfaceModel":"线路板式的分层台面：浅灰信号底、描边的独立板卡节点、一条贯穿的接线轨道。","palette":"pale paper #f5f2ec, signal ink #1f2530, trace line #c84a3a, node accent #2f6f5f, silent rail #b8b4a9","typography":"工程排版的等宽主视觉，以真实 prompt 片段作为大标题文字层，衬托窄副标。","desktopComposition":"单一横向信号流将左侧提示词与右侧构件相连，下文以节点带组织类别与事实。","mobileTransformation":"信号走线弯曲为纵向下行轨迹，提示词在上、构件在下，逐点下读。","mediaStrategy":"无合格本地媒体，移除媒体区，用派生信号轨迹作为标志视觉。","evidencePlan":["用仓库对外描述'每个项目自包含并附带生成提示词与演示'作为'每项目携带 prompt 与 demo'一节的核心证据，并标注读自 readme。","用仓库自述的类别划分（Hero、落地页、着色器、设计系统、组件、作品集、动画与加载器、3D 与游戏、模板）驱动'类别节点'一节，全部来自已验证的 readme/topics，不杜撰数量。","用话题标签与事实（React、Tailwind、Three.js、Vite、Framer Motion、GSAP、WebGL、GLSL）组织'技术与运行时轨道交通'一节，均出自拓扑列表与语言记录。","用事实中的语言（HTML）与许可证（MIT）作为可核验的 GitHub 事实节点收尾，仅呈现 readme 已给出的生产前审查提示。"],"localeContract":{"zh-CN":"首屏大标题采用中文主导、技术词保留原样；等宽文字层以保留 prompt 的英文原文为主，正文与副标用中文自然叙述；CJK 安全区至少 20px。","en":"Headline and running text in natural English; the monospace prompt layer keeps raw English token fragments as the signature glass text; CJK-safe inset respected on both languages."},"forbiddenPatterns":["三卡指标墙","浏览器/编辑器/终端外壳","发光网格或粒子","伪造产品截图","浏览器壳或伪 IDE"],"historicalReuse":{"sourceAssetId":"HEAD:luna-max-v1/pulkitxm-claude-directory","decision":"rebuild","rationale":"旧版是'深色样本柜三抽屉'的静态容器意象，与本方向所承接的证据机制（prompt 输入收敛为可复用构件的流动）并不匹配；容器/抽拉式构图已被本批次列为需规避的壳类风险。故不沿用柜体与抽屉，而重建为一套横向信号轨迹，仅从旧版汲取与当前事实兼容的少量视觉素养。","reusedElements":["清晰的单焦点首屏结构（先辨识项目机制再进入事实）","窄距等宽标签做细粒度标注的排版习惯","低饱和暖纸底作为整体背景基调"],"discardedElements":["深色木柜体与三个抽屉的开合容器","抽屉式样本槽的抽拉交互","墨紫/珊瑚色柜体表面配色的静态暗示","柜体硬投影的纸面戏剧效果"]}},"visualReview":{"schemaVersion":"dodot-automated-design-review-v1","status":"approved","summary":"页面忠实实现了选定方向 prompt-to-artifact（信号轨迹）：标志视觉为一枚真实存在的横向 SVG 信号走线，将左侧 prompt.md 节点经 GLSL/component/template 节点收敛为右侧可复用构件方块，配色、等宽排版与六段章节序列均对齐 Brief；九类类别、技术栈、语言/许可证与审查提醒全部可在 material.json 证到依据，无假控件、无设备壳、无三卡或卡片墙回退；中英双语文案等值且自然，390px 下网格充分重构且无横向溢出。","checks":{"projectFit":{"passed":true,"evidence":"设计方向为 prompt-to-artifact 信号链；hero 采用横向信号走线，左端 prompt.md 矩形输入、路径经 GLSL/component/template 三节点收敛到右侧 component 缩略方块，与 brief.heroGeometry/signatureVisual 一致；章节序列 signal-line-hero→categories-mapped-nodes→each-project-carries-prompt-and-demo→stack-rail→warnings-and-review→license-closing 与 brief.sectionSequence 完全吻合；---bg:#f5f2ec/--ink:#1f2530/--trace:#c84a3a/--node:#2f6f5f/--rail:#b8b4a9 对应 brief palette；大写等宽窄距标签与真实 prompt 片段的排版对应该方向 typography。sections 为 6，处于 brief 4-7 区间，非回退到通用模板。"},"evidenceBound":{"passed":true,"evidence":"九类类别（Hero/落地页/着色器/UI设计系统/组件/作品集/动画与加载器/3D与游戏/模板）来自 readme/topics；技术栈（React/Tailwind/Three.js/WebGL/GLSL/Framer Motion/GSAP/Vite/TypeScript/HTML/CSS/JS）均可见于 topics 与 summary 证据；language HTML 与 license MIT 为 verifiedClaims；prompt.md 与 demo.mp4 出自 readme '每个项目自包含并附带提示词与演示'；warnings 四节对应 readme 的生产前审查提醒证据。页面明确标注这些类别与语言来源，不虚构数量，未宣称未证实的组件覆盖。"},"signatureVisual":{"passed":true,"evidence":"签名视觉真实存在于两语言版本 hero 内：

一行提示词， 一块可复用构件。

信号沿一条主线展开，途经九类实验节点

每个项目都自动携带它的源头：提示词与演示

沿着同一条轨道：技术栈

这些界面来自 AI，使用前请先自己走一遍

One prompt line in, one reusable block out.

The signal runs in one line past nine kinds of experiment

Every project carries its own source: the prompt and a demo

One shared track: the stack it actually ships on

These interfaces come from AI—walk them yourself first

一行提示词，一块可复用构件。

One prompt line in,
one reusable block out.