agentleFS
ChefDavid0815ChefDavid0815/gpt-craft-system/skills/frontend-app-builder/SKILL.md

frontend-app-builder

Skill0 starsChanged 35 days agoMITView on GitHub

Create requested image-generated frontend concepts or bitmap asset studies under frontend-craft. Editable Figma/vector composition remains primary for high-craft UI; skip clear existing references and small fixes. Does not replace implementation or impose a style, image quota or approval gate.

1 other project uses a version of this.

Adopted by

Most recently taken up by

  • Other versions1 project uses a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 1

    1. openai/plugins★ 7.8ksame name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • In this repository10 other files it gives its agents.

The file

Files
SKILL.md

Image-first concept adapter

本地image-first概念/资产辅助适配器,制作流程由frontend-craft统一承担;不是OpenAI官方技能的原样分发,也不是另一套前端主流程。

高投入界面默认先按creative-toolchain/design-first形成可编辑Figma/矢量构图;此技能只辅助明确要生图的概念/栅格素材,不把整页生成截图重新立为最终权威。

  1. 沿用同一视觉/功能契约:主体、用户风格、内容/任务、格网/文字安全区、资产/状态、移动与运动。图不能编造品牌证明/业务数据,也不能把产品改为另一种故事。
  2. 用户明确要生成图像概念/图像预览或确需新栅格探索时,先读宿主imagegen技能,按真实模型/引用图机制制作;仅因UI方向未定先按design-first组织可编辑构图,清楚Figma/用户参考或小修可复用,不为了流程凑图。
  3. 先做能解决构图问题的代表性概念;完整项目要规划后续结构/关键状态,不能只做hero。仅缺可读细节/移动/特定状态时补相应视图,不每节固定再生一图。生成图是视觉参考,DOM交互/焦点/错误/持久化由代码完成。
  4. 把概念转为共享token、组件/容器、copy、裁切和资产清单。主图片/背景/包装按独立可用资产导出,文字与控件仍可编辑;不把截图当真实UI,不用粗糙CSS冒充已要求的复杂摄影/插画。代码原生图表、矢量或程序化美术在合适项目照常使用。
  5. 只在用户明确要求“先看概念、等我确认”时暂停实现。否则已有制作授权下继续;发现实际冲突按契约修正并记录,不以生图里失真的文字/像素取代真实功能/可访问性。
  6. 对实际页面查构图、type、颜色、裁切/光影、组件与状态;修具体偏差并定向复查。没有外部模型/图像工具能力就说明缺口,继续可用路径;不编造Image2.5/10分或强加付费API路线。

图像brief/资产提取细节读 concept recipes;Adobe/Figma交接回creative-toolchain。实施和交付只走frontend-craft的一条链。

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.