Skip to content

docs: Add comprehensive Tingly-Box user guide with bilingual content and screenshots - #1112

Draft
0x0079 wants to merge 1 commit into
mainfrom
doc/guide
Draft

docs: Add comprehensive Tingly-Box user guide with bilingual content and screenshots#1112
0x0079 wants to merge 1 commit into
mainfrom
doc/guide

Conversation

@0x0079

@0x0079 0x0079 commented Jun 3, 2026

Copy link
Copy Markdown
Collaborator

Summary

This PR adds a complete user guide for Tingly-Box Web UI, organized as bilingual (Chinese + English) markdown documentation with accompanying screenshots. The guide covers all major features and workflows, from initial setup through advanced configuration.

Key Changes

  • Documentation Structure (docs/guide/):

    • Bilingual organization: zh/ (Chinese) and en/ (English) directories with parallel content
    • 20 numbered topic files covering all UI features and workflows
    • Centralized screenshot repository in images/ directory
    • Language selector at root level (docs/guide/README.md)
  • Content Coverage:

    • Getting Started: Onboarding and provider setup
    • Agent Scenarios: Claude Code, Codex, OpenCode, VS Code, Xcode, Claude Desktop, OpenAI/Anthropic SDK proxies, Claw Agent, Embed, ImageGen, Playground
    • Core Features: Credentials, Virtual Models, API Tokens, Dashboard, Remote Coder, Remote Control, Prompt Management, MCP & Tools, Guardrails
    • Advanced Topics: Routing Rules & Extensions, System Settings, Access Control, Experimental Features
    • Each topic includes UI screenshots, tables, and step-by-step workflows
  • Tooling (.claude/skills/doc-guide/):

    • screenshot-docs.mjs: Automated screenshot capture script using Playwright
      • Auto-detects available Chromium binary from multiple fallback paths
      • Captures all guide images in a single pass from mock dev server
      • Handles headless browser setup with sandbox/memory constraints
    • SKILL.md: Comprehensive skill documentation with prerequisites, setup instructions, and maintenance guidelines
  • Git Configuration:

    • All docs/guide/ files force-added via git add -f (since docs/ is in .gitignore)
    • Includes instructions for maintaining the documentation tree

Implementation Details

  • Screenshots are referenced consistently across both language versions using relative paths (../images/<name>.png)
  • Documentation follows a numbered file convention (01–20) for reading order
  • Each topic is self-contained with clear section headers and tables for quick reference
  • The screenshot automation tool supports both pre-installed Playwright browsers and manual Chrome for Testing downloads
  • Documentation includes notes about Full Edition features and experimental toggles where applicable

https://claude.ai/code/session_01UTGPqjHogwsFY29k8dDeH4

@0x0079
0x0079 marked this pull request as draft June 3, 2026 06:28
@0x0079
0x0079 force-pushed the doc/guide branch 3 times, most recently from 5f384b3 to 3167860 Compare June 12, 2026 08:28
Complete guide for Tingly-Box Web UI including:
- Getting started and onboarding flow
- Scenario overview (Claude Code, Codex, SDK Proxy, etc.)
- Detailed scenario pages with screenshots:
  - Claude Code: provider config, quick start, model selection, 1M context
    toggle, profile CLI (tingly-box profile / tingly-box cc)
  - Codex: specialized scenario for Codex CLI
  - Other coding agents (Playground, Remote Coder, Imagegen)
- Routing rules, smart routing, rule plugins
- Credentials and provider setup (Connect AI flow)
- Dashboard (usage stats, activity heatmap), Virtual Models, API Tokens,
  Access Control
- Guardrails, Remote Control, Prompt Skills, MCP integration
- Experimental features

All pages are maintained in both English and Chinese with corresponding
screenshots in docs/guide/images/ (compressed with pngquant, ~65% smaller
than raw captures with no visible quality loss).

Includes the .claude/skills/doc-guide/ screenshot-capture skill used to
generate and refresh these screenshots.

Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UTGPqjHogwsFY29k8dDeH4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants