OPC Global AI-Native Web App Instruction
Document status
This file is the implementation and governance source of truth for the OPC Global homepage and stakeholder onboarding experience. The canonical TABLE AI × OPC Global blueprint is preserved in full after this instruction layer.
- Source blueprint: user-provided
pasted-text.txt, 1,195 lines and 55,328 bytes - OPC Global brand source: https://apuch.art/api/brands/opcglobal.json
- Brand directory manifest: https://apuch.art/api/manifest.json
- Pinned brand version:
735ff5e, published 2026-07-24 - Pinned asset checksums:
- hero:
8351935e9abc74b963309f2ec5677f22a9eaf4998c0e0cb59ecd55be42e4fe40 - vector logo:
b58c3be7390a1b625de8ad7d5c953fe8b95d1467692977c338c9b255f266502c - primary blue logo:
c970696e04ab2859dd66c7b85c2c1b461d06ede4e2d65ec6a97d9c11db1396b3
- hero:
- Brand caveat: the published record is marked
placeholderand has noprimaryGuide. The tokens and assets are official. Typography, layout, component, motion, and interaction rules below are product-system extensions.
Product objective
Build three coordinated layers:
- This complete instruction and governance record.
- A concise bilingual public homepage that explains the task-value operating system without reproducing every policy table.
- A bilingual, role-based onboarding prototype for all public and operational stakeholders.
- A public standards center and versioned API/MCP registry that expose the canonical blueprint, controlled terminology, TaskSpecs, roles, policies, and source provenance without creating a second source of truth.
The experience must make the operating model understandable, auditable, and actionable while never accepting identity documents, payment credentials, confidential customer material, real KYC information, or regulated data.
Implementation baseline
- Sites-compatible React and Next-style routing through vinext.
- Tailwind CSS v4 for token integration, with scoped product CSS for the editorial layout and state system.
- Server-rendered content by default; client code is isolated to onboarding state, validation, confirmation, and device-local persistence.
- One optimized local derivative of the checksum-verified official hero is used for page performance. The untouched official source remains archived beside it.
- Exactly one branded social preview is approved for this release:
public/og.png, SHA-256a4eff5d3d187dfbe0f1ba305597d0ecc5abd09e39e1bcd374e4145af1123e697. - The site remains useful with JavaScript delayed and the copilot remains useful without a remote model provider.
Experience architecture
Routes
/redirects to/zh/enand/zhare localized homepages/en/standardsand/zh/standardsrender the complete canonical blueprint/en/developersand/zh/developersdocument the public API and MCP boundary/en/onboardingand/zh/onboardingare stakeholder selectors/[locale]/onboarding/[role]contains each guided role journey- Locale switching preserves the current route and device-local progress
Public stakeholder roles
| Role key | English name | Chinese name | Primary onboarding outcome |
|---|---|---|---|
buyer |
Organization / Buyer | 企业与机构需求方 | A structured need, outcome, data grade, timing, budget band, and acceptance owner |
expert |
Expert / Standard Owner | 专家与标准所有者 | Domain evidence, standard or IP scope, review role, and availability |
coach |
Coach / Work-package Lead | 教练与工作包负责人 | Delivery leadership, task decomposition, mentoring, quality responsibility, and OPC level |
contributor |
Contributor / OPC Unit | 贡献者与 OPC 单元 | Skills, task evidence, readiness, availability, data eligibility, and growth path |
ecosystem-partner |
Ecosystem Partner | 生态合作伙伴 | Regional-node or task-factory scope, territory, local capability, and delivery network |
Operational stakeholder roles
| Role key | English name | Chinese name | Primary onboarding outcome |
|---|---|---|---|
task-architect |
Task Architect | 任务架构师 | TaskGraph, TaskSpec, dependency, effort, acceptance, and split-design readiness |
quality-reviewer |
Independent Quality Reviewer | 独立质量审查人 | Rubric, independence, conflict, evidence, and review-timing readiness |
compliance-lead |
Data & Compliance Lead | 数据与合规负责人 | Data classification, regional controls, access, retention, and escalation readiness |
settlement-lead |
Settlement & ValueLedger Lead | 分账与结算负责人 | SplitRule, ledger, release, exception, and audit readiness |
Homepage narrative
The homepage must present these ideas in this order:
- Turn real work into verified value.
- Need, outcome, TaskGraph, human-agent delivery, evidence, settlement, credentials, and reusable assets.
- TABLE AI, OPC Global, shared infrastructure, regional nodes, and task factories.
- The five public role entry paths.
- TaskSpec, evidence-based acceptance, transparent SplitRules, explainable matching, data classification, and dispute rights.
- The three initial task factories.
- Verified Settled Value as the operating north-star definition.
- Transparent service fees and contribution rights.
- A single clear route into onboarding.
Never present the expansion gates, the 0.5 / 3 / 2 model, or any target as an achieved result. Do not use fake customer logos, fabricated proof, invented performance data, or “zero platform fee” claims.
Brand and UI system
Official theme tokens
| Semantic token | Value | Usage |
|---|---|---|
| Primary | #1D3557 |
Navigation, primary actions, headings, structural emphasis |
| Accent | #B79B63 |
Verified value, selected states, limited highlights |
| Secondary | #A23E3E |
Critical risks and errors only |
| Surface | #F3F5F6 |
Page and grouped section background |
| Paper | #FFFFFF |
Elevated or input surfaces |
| Ink | #162130 |
Primary text |
| Muted | #596776 |
Secondary text |
| Line | rgba(29, 53, 87, 0.16) |
Dividers and control borders |
Product-system extensions
- Light theme only for this release.
- Geist Sans with Noto Sans SC and system fallbacks; Geist Mono for IDs, formulas, and ledger values.
- One 12px corner-radius scale.
- Phosphor icons with a consistent weight.
DESIGN_VARIANCE: 5,MOTION_INTENSITY: 4,VISUAL_DENSITY: 5.- Motion must communicate hierarchy, progress, feedback, or state change.
- All automatic movement must respect
prefers-reduced-motion. - Avoid generic AI-purple gradients, neon glows, excessive glass, invented SVG illustration, equal three-card grids, and fake product screenshots.
- Use the official global-network hero image and official logo assets.
Localization rules
- Chinese is the default locale. English is available without resetting route or onboarding state.
- All navigation, content, roles, form labels, validation, copilot output, privacy guidance, and next steps must exist in both languages.
- Locale switching changes presentation only. It must not reset answers.
- Identifiers such as TaskSpec, TaskGraph, VSV, SplitRule, and ValueLedger remain stable across locales and receive a translated explanation.
Structured onboarding copilot
The copilot is not an open-ended chat surface. It is a deterministic, provider-neutral guidance layer over the typed onboarding state.
Allowed behaviors:
- recommend or confirm a role;
- identify missing non-sensitive information;
- calculate a readiness state;
- identify policy or data risks;
- propose the next preparation action;
- cite the relevant blueprint section.
Required behaviors:
- clearly label recommendations as proposals;
- keep the user in control of confirmation;
- work when AI services are unavailable;
- save only non-sensitive state in browser storage;
- provide a reset action;
- never issue credentials, release money, alter SplitRules, complete KYC, or submit a final production application.
Public interfaces
type Locale = "en" | "zh";
type PublicRole =
| "buyer"
| "expert"
| "coach"
| "contributor"
| "ecosystem-partner";
type OperationalRole =
| "task-architect"
| "quality-reviewer"
| "compliance-lead"
| "settlement-lead";
type Role = PublicRole | OperationalRole;
interface OnboardingState {
schemaVersion: 1;
role: Role;
answers: Record<string, string | string[] | boolean>;
evidenceRefs: string[];
currentStep: 0 | 1 | 2;
readiness: "starting" | "building" | "ready";
riskFlags: string[];
nextActions: string[];
confirmations: string[];
lastSavedAt: string;
}
interface AIRecommendation {
summary: string;
suggestedRole: Role;
missingInformation: string[];
riskFlags: string[];
blueprintCitations: string[];
confidence: "low" | "medium" | "high";
confirmationRequired: true;
}
interface BrandSnapshot {
brandSlug: "opcglobal";
status: string;
sourceVersion: string;
synchronizedAt: string;
tokens: Record<string, string | string[]>;
assets: Array<{
id: string;
filename: string;
sha256: string;
}>;
}
interface StandardsManifest {
schemaVersion: string;
contentVersion: string;
sourceCommit?: string;
instructionSha256: string;
blueprintSha256: string;
canonicalLanguage: "zh";
}
interface TermDefinition {
id: string;
canonicalZh: string;
canonicalEn: string;
aliases: string[];
definitionZh: string;
definitionEn: string;
sectionId: string;
}
MCP boundary
Use apuch.art’s published get_brand, list_assets, get_asset, and
request_asset_url capabilities through the brand-sync adapter, with its
public brand JSON as the deterministic fallback.
Published OPC resources:
opc://manifest/currentopc://glossary/currentopc://standards/{sectionId}opc://roles/{role}opc://taskspec/{taskCode}opc://policy/{policyId}opc://brand/current
Permitted read or draft tools:
resolve_termvalidate_standard_referencevalidate_taskspeccompare_standard_versionsdraft_alignment_reportrecommend_roledraft_onboarding_profileassess_readinesspropose_task_path
Do not expose autonomous payment release, credential issuance, SplitRule
modification, or final onboarding submission. Remote MCP uses stable protocol
version 2025-11-25 over stateless Streamable HTTP and may negotiate
future versions only after they become stable. The 2026-07-28 revision is an
RC at the time of implementation and must not be a first-release dependency.
Protocol status must be rechecked against the
official MCP releases.
The build-time brand adapter should attempt the published MCP tools first and fall back to public brand JSON without weakening checksum validation. Runtime AI integration must sit behind a provider-neutral adapter. Every future model-assisted provenance event records the model, prompt or Skill version, tool calls, source data, output proposal, and explicit human confirmation.
Accessibility and performance
- WCAG AA contrast for all text and controls.
- Visible keyboard focus on all interactive elements.
- Labels above inputs; helper text optional; errors below inputs.
- No placeholder-only labels.
- Explicit loading, empty, validation, completion, recovery, and reset states.
- Explicit mobile layouts at 375px, 768px, 1024px, and 1440px.
- Hero image dimensions must be reserved to prevent layout shift.
- Target LCP below 2.5 seconds, INP below 200ms, and CLS below 0.1.
- Honor reduced motion and avoid scroll listeners tied to React state.
Traceability matrix
| Blueprint section | Homepage | Onboarding | Future product module | Governance / policy |
|---|---|---|---|---|
| 一、核心结论 | Hero and value loop | All role introductions | Command Center | Platform charter |
| 二、愿景、使命与战略定位 | Mission and VSV | All role purpose statements | KPI layer | Strategy charter |
| 三、TABLE AI 与 OPC Global 的角色分工 | Operating network | Ecosystem partner | Organization and permissions | Brand and operating model |
| 四、从职业目录转向任务图谱 | TaskGraph explanation | Role and skill matching | TaskGraph / SkillGraph | Classification standard |
| 五、任务层级与最小交易颗粒度 | Value-loop detail | Buyer and task architect | TaskGraph | Task granularity policy |
| 六、标准任务卡 TaskSpec | Trust architecture | Buyer and task architect | TaskSpec library | Task standard |
| 七、第一批标准任务目录 | Task-factory examples | Relevant role examples | Standard task market | Versioned catalog |
| 八、价值交付标准 | Evidence and quality | Buyer and reviewer | Quality Engine | Acceptance policy |
| 九、工作量、报价与价值分离 | Transparent commercial model | Buyer and settlement lead | Quote Engine | Pricing policy |
| 十、智能分账 | Transparent contribution rights | Settlement lead | ValueLedger | Split and asset policy |
| 十一、Demand Radar | Task-factory context | Buyer and ecosystem partner | Need Studio / Demand Radar | Opportunity scoring |
| 十二、AI时代新岗位 | Role entry paths | Expert, coach, contributor | TalentGraph | Role formation standard |
| 十三、OPC UNI | Paid growth | Coach and contributor | OPC UNI | Credential policy |
| 十四、人才匹配与信誉体系 | Explainable matching | Delivery roles | Match Engine | Appeal and reputation policy |
| 十五、交付、验收与争议机制 | Trust architecture | Buyer, coach, reviewer | Workroom / Quality Engine | Dispute policy |
| 十六、产品系统架构 | Shared infrastructure | Operational roles | All named modules | Technical governance |
| 十七、全球化架构 | Regional network | Ecosystem partner and compliance | Trust & Compliance | Regional and data policy |
| 十八、商业模式 | Transparent service model | Buyer and partner | Quote / Billing | Commercial policy |
| 十九、首期三个任务工厂 | Task-factory section | Buyer and partner | Vertical task factories | Launch focus |
| 二十、90天落地计划 | Not presented as achievement | Next-step guidance | Delivery roadmap | Program governance |
| 二十一、扩张闸门 | Labeled validation criteria | Operational readiness | Command Center | Expansion policy |
| 二十二、管理指标体系 | VSV and hypothesis framing | Role readiness metrics | Analytics | Measurement standard |
| 二十三、最容易失败的十个地方 | Trust safeguards | Prohibited actions | Risk monitoring | Risk register |
| 最终战略表达 | Final CTA | Completion summary | Product narrative | Strategy charter |
Acceptance checks
- The canonical blueprint below retains all source headings, tables, task codes, formulas, benchmarks, gates, and risk items.
- Every role has complete English and Chinese content.
- Every role page includes purpose, responsibilities, prerequisites, evidence, prohibited actions, readiness, next actions, and blueprint citations.
- Brand assets match the recorded SHA-256 checksums.
- No visible website copy contains an em dash.
- No production-only or sensitive action is presented as operational.
- All routes build and render without client-side errors.