我主导了 LUMA Anatomy 的产品体验与视觉设计，并与 Codex 协作，将 3D 人体图谱、普拉提教材与体态学习整合为一个已上线的双语网页产品。从品牌呈现到空间交互，再到资料组织和版本交付，我把设计判断贯穿在真实产品的每一层。I led the product experience and visual design of LUMA Anatomy, working with Codex to bring a 3D body atlas, Pilates manuals and posture learning into one live bilingual web product. My design decisions connect brand expression, spatial interaction, content structure and delivery.
旋转人体、查看深层结构、聚焦局部、阅读解剖说明，再进入教材动作与体态主题。LUMA 将视觉表达、专业内容和功能实现放在同一个可操作的界面中，让完整产品成为设计能力的证据。Rotate the body, reveal deeper structures, focus a region and read its anatomy, then explore manual exercises and posture topics. LUMA brings visual craft, specialist content and implementation into a working interface—making the product itself evidence of the design.
以上为当前项目的内容与结构规模；结构条目包含左右侧、分部、支持组织及附着区。These figures describe the current content and structure inventory. Structure entries include sides, subdivisions, supporting tissues and attachment areas.
LUMA 的产品价值来自内容之间的关系：解剖图谱回答“在哪里”，教材动作呈现“怎么做”，体态主题组织“围绕什么学习”。我用统一的工作台结构，让不同内容保有各自的表达方式，同时共享清晰的导航逻辑。LUMA derives its value from the relationship between its content: anatomy shows where a structure is, repertoire explains an exercise, and posture provides a topic to study. A shared workspace pattern gives each type of content an appropriate presentation and a consistent navigation logic.
左侧选动作，中间看对应教材图，右侧读分阶段口令、注意事项、调整方式与依据。动作还可打开关联 3D 解剖，查看相关肌肉与骨性关系；原页入口保留核对路径。Choose an exercise on the left, inspect its manual figure in the centre, and read phased cues, precautions, modifications and rationale on the right. Linked 3D anatomy connects an exercise to its muscles and bones, while source-page access preserves a route back to the manual.
骨骼、肌肉、器官与筋膜可分类查看。结构目录与模型选择共享同一身份，双语名称、原始拉丁名和解剖资料随选择呈现；旋转、隐藏、透明与聚焦服务于空间观察。Explore skeleton, muscles, organs and fascia by category. The directory and model selection share structure identities, revealing bilingual names, Latin terms and anatomy notes. Rotation, hiding, transparency and focus support spatial inspection.
按身体区域筛选主题，在练习、课程流程和解剖说明之间切换。资料里的动作顺序、来源剂量与完整程度分别呈现，帮助读者分清有哪些信息、哪些仍需回到来源确认。Filter topics by body region and switch between exercises, course flow and anatomy notes. Exercise order, source dosage and completeness are presented separately, making the available information and points requiring source review visible.
目录、模型与结构说明互相对应。Directory, model and notes refer to the same structure.
教材步骤可进一步查看关联解剖。Manual steps connect to relevant anatomy.
练习、流程与来源进入同一阅读路径。Exercises, flow and sources form a coherent reading path.
三类工作台由 React 与 TypeScript 组织。教材使用结构化的动作、阶段、呼吸、页码与解剖关联字段；体态资料使用主题、来源及动作条目。统一结构 ID 将教材中的肌肉和骨骼引用连接到模型目录。当前数据检查覆盖 599 条教材记录，并验证所有解剖关联 ID 均存在。React and TypeScript structure the three workspaces. Exercise data includes phases, breathing, page references and anatomy links; posture data contains topics, sources and action entries. Shared structure IDs connect manual references to the model index. Data checks cover all 599 exercise records and confirm that referenced anatomy IDs exist.
我把三维展示设计成一组有明确意图的观察动作：找到结构、看清关系、聚焦细节、读懂说明。模型因此具备可查阅、可定位、可关联的交互价值。I designed 3D exploration around a set of purposeful actions: find a structure, inspect its relationships, focus a detail and read its explanation. The model becomes an interface for locating and connecting knowledge.
目录选择与模型点击都能指向结构身份。选中态、标注和说明共同反馈，让“我正在看哪里”持续可见。Directory selection and model picking both resolve a structure identity. Highlighting, labels and notes give coordinated feedback about what is being inspected.
聚焦依据模型边界与面板内可用区域计算，避开标题、工具和底部视角栏。放大后的内容仍与操作环境保持关系。Focus uses the structure bounds and available space inside the panel, accounting for the heading, toolbar and view presets. Enlarged content retains its relationship with the surrounding controls.
网站已接入 40 个局部肌肉条目的颜色与法线贴图。选中和关联高亮保留原有纹理表现，近看细节与识别状态可以兼顾。The site integrates colour and normal textures for 40 local muscle entries. Selected and linked states preserve the underlying texture detail, combining material definition with clear interaction feedback.
Three.js 加载 12 个 GLB 资源，GLTFLoader 与本地 Draco 解码器处理模型载入。Raycaster 完成可见结构拾取，统一索引校验 1,702 个条目不丢失、不重复。局部聚焦使用透视投影边界计算，已有 36 个数学用例覆盖不同屏幕、观察方向和结构比例。PBR 材质保留颜色与法线信息，并管理纹理、几何及材质的释放。Three.js loads 12 GLB assets through GLTFLoader and a local Draco decoder. Raycaster handles visible-structure picking; an identity index verifies 1,702 entries without missing or duplicate mappings. Focus uses perspective bounds, with 36 mathematical cases covering screen sizes, view directions and structure proportions. PBR materials preserve colour and normal information, with explicit cleanup of textures, geometry and materials.
LUMA 的视觉以深蓝灰建立空间，以青绿色标记交互，再让模型本身的骨白与肌肉色成为主体。我统一标题、正文、辅助信息与间距规则，使三个工作台在不同内容密度下仍保持同一种品牌气质。LUMA uses deep blue-grey to establish space and teal to signal interaction, leaving the bone and muscle colours to carry the model. Shared typography and spacing give the three workspaces a consistent identity across different content densities.
界面文字使用无衬线体，原始拉丁名使用衬线斜体。文字的视觉差异对应内容身份，帮助读者分辨操作、解释与术语。Sans-serif type supports the interface; italic serif type distinguishes original Latin terms. The difference reflects content roles: controls, explanation and terminology.
4px 基础间距刻度，配合控制、卡片和面板的分级圆角。中英文切换时沿用相同信息层级；长名称、滚动区、选中态与视角按钮都纳入实际界面的验收。A 4px spacing scale works with separate control, card and panel radii. Chinese and English share the same hierarchy. Long names, scrolling regions, selected states and view controls are reviewed in the working interface.
颜色、字级、行高、间距、圆角与动效时长被记录为共享 token。生成脚本输出 CSS 变量及 HTML 设计系统说明；共享动画菜单承接选中与悬停反馈。规则进入代码之后，局部调整可以沿同一套定义延续到三页，而不依赖逐页凭感觉调样式。Shared tokens define colour, type scale, line height, spacing, radii and motion duration. A generator produces CSS variables and HTML design-system documentation, while shared animated tabs provide selection and hover feedback. Encoding the rules allows changes to follow the same definitions across all three workspaces.
我的主导体现在持续定义质量：什么应该优先、界面应怎样回应、哪种版本值得保留。我把这些判断转化为明确的修改要求，与 Codex 往返检查，让品牌、交互和实现逐步收敛到同一个结果。My ownership lies in continuously defining quality: what takes priority, how the interface should respond, and which version deserves to remain. I turn these judgments into specific requirements and review the result with Codex until brand, interaction and implementation align.
提供视觉方向，确定信息层级和交互行为。Set visual direction, information hierarchy and interaction behaviour.
协助组件开发、数据整理、3D 接入与技术验证。Support components, data structuring, 3D integration and technical checks.
用截图与操作反馈校准尺寸、布局和显示状态。Use screenshots and interaction feedback to refine scale, layout and states.
确认本地版本，再上线并保留可恢复的交付包。Approve the local version, publish and preserve a recoverable delivery package.
“全站的字号、颜色和间距，应遵循同一套设计系统。”“Type, colour and spacing should follow one design system across the site.”
“回到有框分栏的视觉，让三个工作台保持完整、一致的秩序。”“Return to framed panels and give the three workspaces a coherent visual order.”
“先给本地预览；确认后上线，并保留之前版本的上线包。”“Preview locally first; publish after approval and keep the previous release package.”
以上引述为项目迭代要求的整理表达。产品设计、视觉方向与验收由我主导；代码实现与自动检查由 Codex 协助完成。The quotations above are edited summaries of project requirements. I led product design, visual direction and acceptance; Codex supported implementation and automated checks.
最终交付让我的能力以可检查的形式出现：品牌有表达，交互能操作，内容可追溯，网站已上线。项目同时沉淀了设计规范、结构化资料、模型接入方式和版本归档，使后续工作有清楚的起点。The final delivery makes my capabilities inspectable: a clear brand, working interactions, traceable content and a live website. Design standards, structured data, model integration and release archives give future work a concrete starting point.
将 3D 空间、专业文字与教学内容放进清晰的信息架构，兼顾探索、查阅与阅读。Bring 3D space, specialist text and teaching content into a clear information architecture for exploration, reference and reading.
从 Logo 的尺寸与配色，到正文层级、主题切换与面板比例，都通过同一套设计规则持续校准。Apply a coherent set of rules to logo scale and colour, reading hierarchy, theme switching and panel proportions.
与 AI 协作完成网页实现、资料校验、部署和交接，把产品想法推进为可以展示与接续的成果。Work with AI through implementation, content checks, deployment and handoff, turning a product idea into demonstrable, maintainable work.
已完成三页工作台、双语与双主题、模型交互、教材与体态资料组织，以及 Cloudflare 发布。当前核对：1,702 个结构 ID 映射通过，599 条教材记录的资料与解剖引用检查通过，20 个体态主题的数据检查通过，36 个聚焦数学用例通过。案例截图取自与发布版对应的本地运行界面。这些结果体现功能和交付完成度；尚未进行独立专家审核或正式用户成效研究。全身模型持续精修，当前已接入 40 个局部肌肉条目的贴图更新。Delivered: three workspaces, bilingual and dual-theme interfaces, model interaction, organised exercise and posture content, and Cloudflare publishing. Current checks pass for 1,702 mapped structure IDs, references in 599 exercise records, data for 20 posture topics, and 36 focus-math cases. Screenshots show the local running interface corresponding to the released version. These are functional and delivery outcomes; independent expert review and formal user-outcome research remain future work. Full-body refinement is ongoing, with textured updates integrated for 40 local muscle entries.
我希望参与需要产品思考、视觉品质与落地能力共同发挥作用的项目。从概念定义到界面细化，再到与 AI 协作实现，我愿意对最终体验负责。I’m interested in projects where product thinking, visual quality and delivery work together. From framing a concept to refining an interface and implementing it with AI, I take ownership of the resulting experience.
